CSS властивості
ГлавнаяВластивості CSSАтрибут margin-bottom в CSS

Атрибут margin-bottom в CSS

391

Встановлює величину відступу нижнього краю елемента. Відступом є відстань від зовнішнього краю нижньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

Відступ від нижнього краю елемента

Мал. 1. Відступ від нижнього краю елемента

Коротка інформація

Значення за замовчуванням 0
Успадковується Ні
Застосовується До всіх елементів
Анімується Так

Синтаксис

<code>margin-bottom: <розмір> | <відсотки> | auto

Позначення

Опис Приклад
<тип> Вказує тип значення. <розмір>
A && B Значення повинні виводитися в зазначеному порядку. <розмір> && <колір>
A | B Вказує, що потрібно вибрати лише одне значення із запропонованих (A або B). normal | small-caps
A || B Кожне значення може використовуватися самостійно або спільно з іншими у довільному порядку. width || count
[ ] Групує значення. [ crop || cross ]
* Повторювати нуль або більше разів. [,<час>]*
+ Повторювати один або більше разів. <число>+
? Вказаний тип, слово або група не є обов'язковим. inset?
{A, B} Повторювати не менше A, але не більше B разів. <радіус>{1,4}
# Повторювати один або більше разів через кому. <час>#

Значення

Величину нижнього відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, так і негативним числом. dl>

Пісочниця

Вінні-Пух був завжди не проти трохи підкріпитися, особливо годин об одинадцятій ранку, бо в цей час сніданок уже давно скінчився, а обід ще й не думав починатися. І, звісно, він страшенно зрадів, побачивши, що Кролик дістає чашки та тарілки.
-tablet is-6-desktop playground-values">
div { background: #e4efc7; padding: 10px; margin-bottom: <span class="playground-active">{{ playgroundValue }}px</span>; }

Приклад

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>margin-bottom</title> <style> .layer1 { background: #8b0086; /* Колір тла */
color: white; /* Колір тексту */
padding: 10px; /* Поля навколо тексту */
margin-bottom:-7px; /* Відступ знизу */
} 
.layer2 { margin-left: 40px; /* Відступ зліва */
background: #e9c1e4; /* Колір тла */
padding: 10px; /* Поля навколо тексту */
}
</style>
</head>
<body> <div class="layer1">Невротичний інваріант у XXI столітті</div> <div class="layer2"> Дуже суттєво наступне: алегорія монотонно ілюструє невротичний холерик, таким чином, другий комплекс рушійних сил отримав розробку у працях А.Берталанфі та Ш.Бюлера.
</div>
</body>
</html>

Результат цього прикладу показаний на рис. 2.

Застосування властивості margin-bottom

Мал. 2. Застосування якості margin-bottom

Об'єктна модель

Об'єкт.style.marginBottom

Примітка

Браузер Internet Explorer до версії 7 у деяких випадках некоректно обчислює значення відступу, задане у відсотках.

Специфікація

Специфікація Стату з
CSS Box Model Module Level 3 Робочий проект
CSS Level 2 Revision 1 (CSS 2.1) Рекомендація
CSS Level 1 Рекомендація

Специфікація

Кожна специфікація проходить кілька стадій схвалення.

  • Recommendation (Рекомендація) — специфікація схвалена W3C та рекомендована як стандарт.
  • Candidate Recommendation (Можлива рекомендація) — група, яка відповідає за стандарт, задоволена, як він відповідає своїм цілям, але потрібна допомога спільноти розробників з реалізації стандарту.) — на цьому етапі документ представлений на розгляд Консультативної ради W3C для остаточного затвердження. та внесення поправок для розгляду спільнотою.
  • Editor's draft (Редакторська чернетка) — чорнова версія стандарту після внесення змін до редакторів проекту.
  • Draft (Чернетка специфікації) — перша чорнова версія стандарту.

Браузери

3 12 1 3.5 1 1
table>

Браузери

У таблиці браузерів застосовуються такі позначення.

  •   ;— властивість повністю підтримується браузером з усіма допустимими значеннями;
  •  — властивість браузером не сприймається та ігнорується;
  •  — при роботі можлива поява різних помилок, або властивість підтримується лише частково, наприклад, не всі допустимі значення де чи властивість застосовується не до всіх елементів, які вказані в специфікації.

Кількість вказує версію браузера, починаючи з якої властивість підтримується.

"field field-name-field-css-cat field-type-taxonomy-term-reference field-label-hidden">

Автор та редактори

Автор: Влад Мержевич
Останнє змінення: 02.03.2020
Редактори: Влад Мержевич
1 1 6 1