CSS стиль margin-bottom. Установка отступа снизу с помощью margin-bottom
CSS стиль margin-bottom задает отступ от нижнего края элемента до внутренней границы его родителя.
Internet Explorer 7 иногда некорректно вычисляет значение отступа, заданное в процентах.
Краткая информация по CSS-свойству margin-bottom
Значение по умолчанию | 0 |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства margin-bottom
margin-bottom: <размер> | auto;
Где auto - указывает, что размер отступов будет рассчитан браузером автоматически.
Размер правого отступа можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах. Размер может быть как положительным, так и отрицательным.
Объектная модель
Объект.style.marginBottom
Пример применения стиля margin-bottom
Проиллюстрируем работу margin-bottom на примере. С помощью отрицательного значения margin-bottom сделаем чтобы текст залезал на заголовок.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля margin-bottom</title>
<style>
header {
background: #872783; /* Цвет фона */
color: #ffffff; /* Цвет текста */
padding: 9px; /* Поля вокруг текста */
margin-bottom: -8px; /* Отступ снизу */
}
article {
margin-left: 40px; /* Отступ слева */
background: #e7c1dc; /* Цвет фона */
padding: 9px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<header>CSS стиль margin-bottom</header>
<article>
С помощью отрицательного значения margin-bottom
сделаем чтобы текст залезал на заголовок.
</article>
</body>
</html>