СSS Свойство margin-top
Пример
Установить верхнее поле для элемента <p> равным 25 пикселям:
p.ex1 {
margin-top: 25px;
}
Попробуйте сами »
Определение и использование
Свойство margin-top задает верхнее поле элемента.
Примечание: Допускаются отрицательные значения
| Значение по умолчанию: | 0 |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да, см. раздел отдельные свойства. Прочитать о animatable Попробовать |
| Версия: | 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 | Задает фиксированное верхнее поле в px, pt, cm и т.д. Значение по умолчанию 0px. Прочитать о 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-top: 10%;
}
Попробуйте сами »
Пример
Установить верхнее поле для элемента <p> равным 2 em:
p.ex1 {
margin-top: 2em;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Поле
HTML DOM Справочник: Свойство marginTop
