CSS margin-bottom Свойство
Пример
Установите нижнее поле для элемента <p> на 25 пикселей:
p.ex1 {
margin-bottom: 25px;
}
Подробнее примеры ниже.
Определение и использование
Свойство margin-bottom задает нижнее поле элемента.
Примечание: Допустимы отрицательные значения.
| Значение по умолчанию: | 0 |
|---|---|
| Inherited: | no |
| Animatable: | yes, see individual properties. Читайте о animatable |
| Version: | CSS1 |
| Синтаксис JavaScript: | object.style.marginBottom="100px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| margin-bottom | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Синтаксис CSS
margin-bottom: length|auto|initial|inherit;
Значения свойств
| Значение | Описание | |
|---|---|---|
| length | Задает фиксированное нижнее поле в пикселах, см, EM и т.д. Значение по умолчанию — 0. Допустимы отрицательные значения. Читать о единицах длины | |
| % | Задает нижнее поле в процентах от ширины содержащего элемента | |
| auto | Обозреватель вычисляет нижнее поле | |
| initial | Присваивает этому свойству значение по умолчанию. (Читайте о initial) | |
| inherit | Наследует это свойство из родительского элемента. (Читайте о inherit) |
Margin Collapse
Верхние и нижние поля элементов иногда сворачиваются в одно поле, равное самому большому из двух полей.
Это происходит не на горизонтальных (левых и правых) полях! Только вертикальные (верхние и нижние) поля!
Посмотрите на следующий пример:
Пример
p.a {
margin: 30px 0;
}
p.b {
margin: 20px 0;
}
В приведенном выше примере элемент < p class = «a» > имеет верхний и нижний пределы 30px. Элемент < p class = "b" > имеет верхний и нижний пределы 20px.
Это означает, что вертикальное поле между < p class = "а" > и < p class = "b" > должно быть 50px (30px + 20px). Но из-за краха маржи, фактические маржа заканчивается время 30px!
Другие примеры
Пример
Задайте нижнее поле для элемента <p> до 10% ширины контейнера:
p.ex1 {
margin-bottom: 10%;
}
Пример
Установите нижнее поле для элемента <p> на 2 EM:
p.ex1 {
margin-bottom: 2em;
}
Похожие страницы
CSS Справочник: CSS Margin
HTML DOM Справочник: marginBottom Свойство