СSS Свойство margin-bottom
Пример
Установить нижнюю границу для элемента <p> 25 пикселей:
p.ex1 {
margin-bottom: 25px;
}
Попробуйте сами »
Определение и использование
Свойство margin-bottom задает нижнюю границу элемента.
Примечание: Допускаются отрицательные значения.
| Значение по умолчанию: | 0 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да, смтреть отдельные свойства. Прочитать о animatable Попробовать |
| Версия: | 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 | Задает фиксированные нижние поля в px, cm, em и т.д. Значение по умолчанию 0. Допускаются отрицательные значения Прочитать о Eдиницы длины | Воспроизвести » |
| % | Задает нижние поля в процентах от ширины содержащего элемент | Воспроизвести » |
| auto | Браузер вычисляет нижние поля | Воспроизвести » |
| initial | Устанавливает это свойство в значение индекса. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Крах полей
Верхнее и нижнее поля элементов иногда происходит (крах) получается единое поле, равная по величине из двух
Этого не происходит на горизонтальных (левого и правого) полях! Только вертикальных (верхнего и нижнего) полях!
Посмотрите на следующий пример:
В примере выше, элемент <p class="a"> имеет верхние и нижние поля в 30 пикселей. Элемент <p class="b"> имеет верхние и нижние поля в 20px.
Это означает, что вертикальные поля между <p class="a"> и <p class="b"> должно быть 50 пикселей (30 пикселей + 20 пикселей). Но в связи с распадом полей фактическая маржа заканчивается 30 пикселей!
Примеры
Пример
Установить нижние поле для элемента <p> равным 10% ширины контейнера:
p.ex1 {
margin-bottom: 10%;
}
Попробуйте сами »
Пример
Установить нижние поле для элемента <p> равным 2 em:
p.ex1 {
margin-bottom: 2em;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Поля
HTML DOM Справочник: Свойства marginBottom
