Свойства границы
Свойства границы задают размеры границы объемлющего прямоугольника. Все они имеют тип <размер-границы>, который определяется следующим образом:
<размер-границы> = <размер> | <процент> | auto
<размер>
Задает фиксированный размер.
<процент>
Вычисляется относительно ширины вмещающего блока, даже для вертикальных границ.
auto
См. этот раздел
Допускаются отрицательные размеры границ, но обозреватели могут накладывать свои ограничения.
Размер верхней границы: свойство margin-top
| Поддержка : |  | Соответствует стандарту (4.0+) | | |  | Соответствует стандарту (4.0+) |
Свойство margin-top задает размер верхней границы объемлющего прямоугольника. Например, следующее правило убирает верхнюю границу документа:
BODY { margin-top: 0 }
Размер нижней границы: свойство margin-bottom
| Синтаксис: | margin-bottom: <размер-границы>| inherit | | Начально: | 0 | | Применимо: | ко всем элементам | | Наследуемо: | нет | | Проценты: | относительно ширины вмещающего блока | | Устройства: | визуальные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту (4.0+) |
Свойство margin-bottom задает размер нижней границы объемлющего прямоугольника. Например, следующее правило изменяет нижнюю границу документа:
BODY { margin-bottom: 3em }
Размер левой границы: свойство margin-left
| Синтаксис: | margin-left: <размер-границы>| inherit | | Начально: | 0 | | Применимо: | ко всем элементам | | Наследуемо: | нет | | Проценты: | относительно ширины вмещающего блока | | Устройства: | визуальные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту (4.0+) |
Свойство margin-left задает размер левой границы объемлющего прямоугольника. Например, следующее правило задает отступ для элементов BLOCKQUOTE:
BLOCKQUOTE { margin-left: 25% }
Размер правой границы: свойство margin-right
| Синтаксис: | margin-right: <размер-границы>| inherit | | Начально: | 0 | | Применимо: | ко всем элементам | | Наследуемо: | нет | | Проценты: | относительно ширины вмещающего блока | | Устройства: | визуальные |
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту (4.0+) |
Свойство margin-right задает размер правой границы объемлющего прямоугольника. Например, следующее правило задает ширину узких абзацев:
P.narrow { margin-right: 50% }
Размеры границы: свойство margin
| Поддержка : | | Соответствует стандарту (4.0+) | | | | Соответствует стандарту (4.0+) |
Свойство margin является сокращением для свойств margin-top, margin-bottom, margin-left и margin-right. Оно задает размер всех границ объемлющего прямоугольника одновременно.
Его значением может быть от одного до четырех размеров. Если заданы все размеры, то они применяются к верхней, правой, нижней и левой границе соответственно. Если задан только один размер, то он применяется ко всем границам. Если заданы два или три значения, то недостающий размер принимается равным размеру противоположной границы.
BODY { margin: 1em } /* все границы равны 1em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
BODY { margin: 1em 2em 3em 4em } /* top=1em, right=2em, bottom=3em, left=4em */
Слияние границ
В некоторых ситуациях CSS допускает слияние границ соседних объемлющих прямоугольников. Слияние границ означает, что соседние границы объединяются в одну границу новой ширины.
Горизонтальные границы не сливаются никогда. Вертикальные границы могут сливаться согласно следующим правилам:
Две и более соседних вертикальных границы блочных элементов сливаются и ширина новой границы равна ширине наибольшей из сливающихся границ.
Границы между плавающим элементом и любым другим элементом не сливаются.
Границы между абсолютно и относительно позиционированным элементами не сливаются.
1 2 3 4 5 6 7
8 8 8
| 
*
Обратная связь