CSS margin-top Свойство
Пример
Установите верхнее поле для элемента <p> на 25 пикселей:
p.ex1 {
margin-top: 25px;
}
Подробнее примеры ниже.
Определение и использование
Свойство margin-top
задает верхнее поле элемента.
Примечание: Допустимы отрицательные значения.
Значение по умолчанию: | 0 |
---|---|
Inherited: | no |
Animatable: | yes, see individual properties. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.marginTop="100px" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
margin-top | 1.0 | 6.0 | 1.0 | 1.0 | 3.5 |
Синтаксис CSS
margin-top: length|auto|initial|inherit;
Значения свойств
Значение | Описание | |
---|---|---|
length | Задает фиксированное верхнее поле в пикселах, PT, cm и т.д. Значение по умолчанию — 0px. Допустимы отрицательные значения. Читать о единицах длины | |
% | Задает верхнее поле в процентах от ширины содержащего элемента | |
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-top: 10%;
}
Пример
Установите верхнее поле для элемента <p> на 2 EM:
p.ex1 {
margin-top: 2em;
}
Похожие страницы
CSS Справочник: CSS Margin
HTML DOM Справочник: marginTop Свойство