CSS стиль margin-top. Установка отступа сверху с помощью margin-top
CSS стиль margin-top задает отступ от правого края элемента до внутренней границы его родителя .
Internet Explorer 7 иногда некорректно вычисляет значение отступа, заданное в процентах.
Краткая информация по CSS-свойству margin-top
Значение по умолчанию | 0 |
Наследуется | Нет |
Применяется | Ко всем элементам |
Правила написания свойства margin-top
margin-top: <размер> | auto;
Где auto - указывает, что размер отступов будет рассчитан браузером автоматически.
Размер правого отступа можно указывать в пикселях (px), процентах (%), или других допустимых для CSS единицах. Размер может быть как положительным, так и отрицательным.
Объектная модель
Объект.style.marginTop
Пример применения стиля margin-top
Проиллюстрируем работу margin-top на примере. Нам нужно, чтобы сверху от текста, вложенного в тег <p> был отступ.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Пример CSS стиля margin-top</title>
<style>
p {
margin-top: 20%; /* Отступ сверху */
background: #ececec; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
border: 2px solid #000; /* Параметры рамки */
}
</style>
</head>
<body>
<p>
Предположим, что нам нужно, чтобы сверху
от блока с текстом был отступ. В этом нам
поможет CSS свойство margin-top.
</p>
</body>
</html>