Блочная модель

Каждый элемент располагается в блоке, состоящем из содержимого этого элемента, рамки (border), промежуточной области между содержимым и границей элемента (padding), а также полей (margin). Изучение этих свойств поможет в дальнейшем, когда вы будете задавать вид странице.

Схематическая структура блочного элемента.

margin

Сокращенный атрибут, который устанавливает отступы от края браузера до границ элемента. Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента.Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора BODY равное нулю.Параметр margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Может иметь значение:

   margin-top - Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента.Величину верхнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
   margin-right - Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента.Величину правого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером.
   margin-bottom -Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента.Величину нижнего отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером
   margin-left -Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента.Величину левого отступа можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом. Аргумент auto указывает, что размер отступов будет автоматически рассчитан браузером

p {margin: значение| auto { {20px 30px 5px }

padding

Сокращенный атрибут, который устанавливает поля от содержимого элемента до его границ.Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.Параметр padding позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

Может иметь значение:

   padding-top - Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.Величину верхнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером
   padding-right -Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.Величину правого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером
   padding-bottom - Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.Величину нижнего поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.
   padding-left - Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.Величину левого поля можно указывать в пикселях (px), процентах (%) или других допустимых для CSS единицах. Аргумент auto указывает, что размер поля будет автоматически рассчитан браузером.

h1{padding: значение | auto { 5px 5px 3px}

border

Параметр позволяет одновременно установить толщину, стиль и цвет рамки вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту. Для установки рамки только на определенных сторонах элемента, воспользуйтесь параметрами border-top, border-bottom, border-left, border-right

Синтаксис:
border: border-width||border-style|| color

border-width - определяет толщину рамки.
border-style - Для управления видом рамки. Предоставляется восемь стилей рамок. color- устанавливает цвет рамки, значение может быть в любом допустимом для CSS формате.

border-width

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа аргументов.Три переменные — thin (2 px), medium (4 px) и thick (6 px) задают толщину границы. Для более точного значения, толщину можно указывать в пикселах или других единицах. Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

p{ border-width:thin|medium|thick|2px,2px,1px,1px}

border-style

Устанавливает стиль рамки вокруг элемента. Браузер Netscape 4 понимает только одно значение, которое определяет стиль сразу для всех границ. Для остальных браузеров допустимо устанавливать индивидуальные стили для разных сторон элемента. Для управления видом рамки предоставляется восемь значений параметра border-style.
   none - линия отсутствует.
   dotted - пунктирная линия.
   dashed - штрих-пунктирная линия.
   solid - сплошная непрерывная линия.
   double - двойная сплошная линия.
   groove - трехмерная борозда.
   ridge - трехмерный гребень.
   inset - трехмерная вырезка.
   outset - трехмерный орнамент.
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

p { border-style: стиль|2px,2px,1px,1px}

border-color

Устанавливает цвет границы на разных сторонах элемента. Параметр позволяет задать цвет границы сразу на всех сторонах элемента или определить цвет границы только на указанных сторонах.Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом.

p{ border-color: red, blue, red, blue}

bottom

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position, он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение). При относительном позиционировании элемента, отсчет ведется от нижнего края родительского элемента , а при абсолютном — относительно нижнего края окна документа.
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Значение параметра bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента

body{bottom:значение | проценты | auto }

border-bottom

Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style.

p{border-bottom:border-width||border-style||color

border-bottom-color

Устанавливает цвет границы внизу элемента.
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

p{ border-bottom-color:цвет}

border-bottom-style

Устанавливает стиль границы внизу элемента.
Для управления видом рамки предоставляется восемь значений параметра border-style рассмотреных выше.

p{border-bottom-style: стиль}

border-bottom-width

Устанавливает толщину границы внизу элемента.
Три переменные — thin, medium и thick задают толщину границы внизу. Для более точного значения, толщину можно указывать в пикселях или других единицах.

p{ border-bottom-width:thin | medium | thick |значение}

border-collapse

Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины. Значение collapse заставляет браузер убирать в таблице двойные линии. Устанавливает, как отображать границы вокруг ячеек таблицы. Этот параметр играет роль, когда для ячеек установлена рамка, в таком случае в месте стыка ячеек получится линия двойной толщины. Добавление значения collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии. При этом между ячейками остается только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.
inherit — свойства наследуются у родителя элемента. Этот аргумент поддерживается только в браузерах Netscape 7 и Opera 7.
collapse — линия между ячейками отображается как одна.
separate — вокруг каждой ячейки отображается своя собственная рамка, в местах соприкосновения ячеек показываются сразу две линии.

body{ border-collapse:inherit | collapse | separate}

border-left

Параметр позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style.

body{ border-left:border-width || border-style || color}

border-left-color

body{ border-left:border-width || border-style || color }

border-left-style

Устанавливает стиль границы левой стороны элемента.
Для управления видом рамки предоставляется восемь значений параметраborder-style.

body{border-left-style: стиль}

border-left-width

Устанавливает толщину границы левой стороны элемента.
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

body{border-left-width:thin | medium | thick | значение}

border-right

Параметр позволяет одновременно установить толщину, стиль и цвет границы с правой стороны элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style.

body{ border-right: border-width || border-style || color}

border-right-color

Устанавливает цвет границы правой стороны элемента.
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

body{border-right-color:цвет }

border-right-style

Устанавливает стиль границы правой стороны элемента.
Для управления видом рамки предоставляется восемь значений параметра border-style.

body{border-right-style:стиль }

border-right-width

Устанавливает толщину границы правой стороны элемента.
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

body{border-right-width:thin | medium | thick | значение }

border-top

Параметр позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.
Значение border-width определяет толщину рамки. Для управления видом рамки предоставляется восемь значений параметра border-style.

body{border-top:border-width || border-style || color }

border-top-color

Устанавливает цвет границы сверху элемента.
Значение цвета может задаваться по его названию, шестнадцатеричному значению, либо с помощью RGB. Кроме значения цвета, еще один допустимый аргумент — transparent, устанавливающий прозрачный фон.

body{border-top-color:цвет }

border-top-style

Устанавливает стиль границы верхней части элемента.
Для управления видом рамки предоставляется восемь значений параметра border-style.

body{border-top-style:стиль }

border-top-width

Устанавливает толщину границы верхней части элемента.
Три переменные — thin, medium и thick задают толщину границы. Для более точного значения, толщину можно указывать в пикселях или других единицах.

body{border-top-width: thin | medium | thick | значение}