css властивість margin-top
CSS властивість margin-top встановлює відступ від верхнього краю елемента.
Відстань встановиться від верхнього краю поточного елемента до внутрішнього краю батьківського елемента.
Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від'ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.
Зона для margin знаходиться поза межами(border), які в свою чергу знаходяться поза полями(padding).
- Нотатка
-
Вертикальні відступи двох елементів можуть об'єднуватися.
автор: NagarD - Нотатка
-
Ця властивість не впливає на незамінні вбудовані елементи, такі як
автор: NagarD<tt>,<span>чи<code>. Застосовується до всіх елементів, крім елементів із типами відображення таблиці, відмінними відtable-caption,tableіinline-table. Вона також не впливає на::first-letterта::first-line.
Синтаксис
margin-top: length|auto|initial|inherit;Властивість margin-top може отримувати 4 значень:
-
length -
Величину верхнього відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути додатнім та від'ємним.
автор: NagarD -
auto -
Вказує, що розмір відступів буде автоматично розрахований браузером.
автор: NagarD -
initial -
Встановлює цю властивість в значення без задання
автор: NagarD -
inherit -
Успадкує значення властивості від свого батьківського елемента
автор: NagarD
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.marginTop="100px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
Другий абзац відсунуто на 2 сантиметри згори від попереднього.
HTML
<p>Звичайний абзац.</p>
<p class="m">Цей абзац відсунуто на 2см згори.</p>CSS
p {
border: 1px solid #0172ad;
margin: 0;
padding: 6px;
}
.m {
margin-top: 2cm;
}Динамічний приклад
Демонстрація роботи властивості
Найпростіший приклад використання css властивості margin-top
Коментарі
Коментарів ще немає — будьте першим!