CSS margin-bottom — зовнішній відступ знизу

CSS властивість margin-bottom встановлює відступ від нижнього краю елемента.

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

Властивість може отримувати в якості значення, як довжину так і відсотки та ключове слово auto. Значення може бути від'ємне. У цьому випадку елементу буде розташований ближче до сусідніх елементів.

Зона для margin знаходиться поза межами (border), які в свою чергу знаходяться поза полями (padding).

Негативні margin-right / bottom поводяться по-іншому, ніж margin-left / top. Вони не зрушують елемент, а «вкорочують» його. Тобто, хоча сам розмір блоку не зменшується, але наступний елемент буде думати, що він менше на вказане в margin-right / bottom значення. Наприклад, в прикладі нижче другий рядок налазить на першу:

<div style="border: 1px solid blue; margin-bottom: -0.5em">
  Перший
</div>

<div style="border: 1px solid red">
  Другий div думає, що висота першого на 0.5em менше
</div>

правити

Загальний опис

правити

Нотатка

Властивість margin-bottom не впливає на такі елементи як <tt> та <span>.

автор: Svitlana правити

Нотатка

Вертикальні відступи двох елементів можуть об'єднуватися.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

margin-bottom: length|auto|initial|inherit;

Властивість margin-bottom може отримувати 4 значень:

length

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

автор: Svitlana

правити

auto

Розмір відступів буде автоматично розрахований браузером.

автор: Svitlana

правити

initial

Встановлює цю властивість в значення без задання

автор: Svitlana

правити

inherit

Успадкує значення властивості від свого батьківського елемента

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	3

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div class="block block-1">
  normal
</div>
<div class="block block-2">
  Відступ згори та від'ємний знизу
</div>
<div class="block block-3">
  Відступ ліворуч
</div>

.block {
  width: 250px;
  height: 100px;
  background-color: #eee;
  border: 2px solid #666;
  font-family: monospace;
  padding: 12px;
}

.block-2 {
  margin-top: 36px;
  margin-bottom: -40px;
}

.block-3 {
  margin-left: 25px;
}

<p class="m">Під цим абзацом — відступ 2 сантиметри.</p>
<p>Наступний абзац відсунувся вниз.</p>

p {
    border: 1px solid #0172ad;
    margin: 0;
    padding: 6px;
}

.m {
    margin-bottom: 2cm;
}

<div class="info">
	<p>За допомогою властивості <code>margin-bottom</code> ми можемо встановити нижній відступ для елементу.</p>
	<p>Нижче розташований блок, для якого ми й додаємо нижній відступ (в даному прикладі - <em>25px</em>). Результат можна побачити на другому блоці, який відсувається від першого на ті самі <em>25px</em>.</p>
</div>

<div class="wrapper">
	<div class="block one">1</div>
	<div class="block">2</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 6px 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	background-color: #ddd;
	border: 2px solid #666;
}

.block {
	background-color: gold;
	width: 75px;
	text-align: center;
	line-height: 75px;
	box-shadow: 2px 2px 2px 0 #666;
}

.block.one {
	margin-bottom: 25px;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>margin-bottom</strong>.</p>

<p>Вона встановлює нижній відступ для елемента на сторінці. Результат дії властивості можна побачити за поведінкою другого блоку.</p>

<strong>margin-bottom: </strong>
<input type="number" class="input" id="num" value="24">px
<strong>;</strong>
  
</div>

<div class="block">2</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  border: 8px solid #F74C32;
  margin-bottom: 24px;
  transition: all .15s ease-in;
}

.block {
  background-color: #222;
  width: 25vw;
  height: 25vh;
  line-height: 25vh;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.5em;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var num = document.querySelector('#num').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('margin-bottom', num + 'px'));
}));

<p class="cap">Звичайний потік: 40px + 30px = 40px</p>
<div class="wrap">
    <div class="a">margin-bottom: 40px</div>
    <div class="b">margin-top: 30px</div>
</div>

<p class="cap">Той самий код у flex: 40px + 30px = 70px</p>
<div class="wrap flex">
    <div class="a">margin-bottom: 40px</div>
    <div class="b">margin-top: 30px</div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    padding: 20px;
}

.cap {
    margin: 20px 0 8px;
    color: #566;
}

.wrap {
    border: 1px solid #cfd4d9;
    padding: 1px 10px;
}

.flex {
    display: flex;
    flex-direction: column;
}

.a,
.b {
    padding: 8px;
    background: #b6e3f4;
}

.a {
    margin-bottom: 40px;
}

.b {
    margin-top: 30px;
}