CSS margin — зовнішні відступи елемента
автор: Svitlana
Загальний опис
автор: NagarD
- Нотатка
-
У блокових елементів розташованих поруч один з одним по вертикалі (
margin-topтаmargin-bottom) спостерігається ефект об'єднання, коли відступи не сумуються, а об'єднуються між собою. Саме об'єднання діє на два і більше блоку (один може бути вкладений всередину іншого) з відступами зверху чи знизу, при цьому примикають відступи комбінуються в один. Для відступів зліва і справа об'єднання ніколи не застосовується. Незважаючи на те, що об'єднуючі поля можуть здаватися, на перший погляд, нелогічними, вони насправді корисні:- Вони не дозволяють порожнім елементам додавати додатковий, зазвичай небажаний, вертикальний проміжок.
- Вони дозволяють більш простіше керувати відступами на сторінці. Наприклад, заголовки та параграфи зазвичай мають вертикальні поля. Якщо поля не згортатимуться, то відступ між заголовкам та параграфом будуть набагато більшими ніж у параграфів, в такому випадку веб-майстру потрібно буде коригувати їх, щоб досягти однакових вертикальних інтервалів.
- Для вкладених елементів, дозволяє компенсувати поле для внутрішнього елемента та його батька. На малюнку видно, що поля об'єдналися в одне, розміром 10 px (Найбільше поле, що у внутрішнього елемента).
А не сумувалися в 15px. Як видно, в такому випадку дочірній елемент підштовхнув свого батька на 5px вниз.
Схлопування не спрацьовує:
- для елементів, у яких на стороні схлопування задано властивість
padding. - для елементів, у яких на стороні схлопування задана межа;
- на елементах з абсолютним позиціонуванням, тобто таких, у яких
positionвстановлено якabsolute; - на плаваючих елементах (для них властивість
floatзадано якleftабоright); - для строкових елементів;
- для
<html>.
- Нотатка
-
Якщо елемент не має батька, відступ буде розраховуватись до краю вікна браузера. Пам'ятай, що у вікна браузера теж встановлені відступи. Щоб їх позбутися, слід встановлювати значення margin для елемента
автор: Svitlana<body>рівним нулю. - Нотатка
-
Властивість
автор: Svitlanamarginможе приймати від'ємні значення. Також за допомогою ключового значенняautoми можемо центрувати елементи відносно батьківського блоку:
Синтаксис
margin: length|%|auto|initial|inherit;Властивість margin може отримувати 5 значень:
-
length -
Визначає відступ в
автор: Svitlanapx, pt, cmта інших одницях , що прийняті в CSS. Значення без задання дорівнює 0. -
% -
Відступ у відсотках відносно батьківського елемента.
автор: Svitlana -
auto -
Браузер самостійно обчислить відступ.
автор: Svitlana -
initial -
Встановлює властивість у значення без задання
автор: Svitlana -
inherit -
Вказує на спадковість властивості від свого батьківського елемента.
автор: Svitlana
| Значення без задання: | 0 |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.margin="100px 50px" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | 1 | 3.5 | 12 | 3 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
HTML
<div class="box">Блок фіксованої ширини: 16px згори й знизу, а ліворуч і праворуч — порівну</div>CSS
.box {
margin: 16px auto;
width: 320px;
padding: 8px;
background-color: #eef3f7;
border: 1px solid #b6c6d3;
}Динамічний приклад
HTML
<div class="inputs">
<input checked id="0 auto" name="margin" type="radio"/>
<label for="0 auto">margin: 0 auto</label>
<br>
<input id="30px" name="margin" type="radio"/>
<label for="30px">margin: 30px</label>
<br>
<input id="30px 0" name="margin" type="radio"/>
<label for="30px 0">margin: 30px 0</label>
<br>
<input id="30px 10px" name="margin" type="radio"/>
<label for="30px 10px">margin: 30px 10px</label>
<br>
<input id="10px 30px" name="margin" type="radio"/>
<label for="10px 30px">margin: 10px 30px</label>
<br>
<input id="10px 30px 40px" name="margin" type="radio"/>
<label for="10px 30px 40px">margin: 10px 30px 40px</label>
<br>
<input id="5px 10px 40px 10px" name="margin" type="radio"/>
<label for="5px 10px 40px 10px">margin: 5px 10px 40px 10px</label>
<br>
</div>
<div class="parent">
<div class="child">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.
</div>
</div>CSS
body {
margin: 0; /* забыраємо відступи */
}
.parent {
width: 500px;
margin: auto;
background: #fd0; /* колір фону */
padding: 10px; /* Поля навколо тексту */
}
.child {
border: 3px solid #666; /* Параметри рамки */
padding: 10px; /* Поля навколо тексту */
margin: 10px; /* відступи навкруги */
}
.inputs {
margin:8px auto 8px;
width:500px;
}JS
document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {
var input_id = this.id; // Вибірка ідентифікатора
// var label = document.querySelector('label[for="'+input_id+'"]'); // Вибірка лейбла
document.querySelectorAll('.child').forEach((n) => n.style.setProperty('margin', input_id));
// document.querySelectorAll('.child').forEach((n) => n.textContent = label?.textContent ?? '');
}));Демонстрація роботи властивості
HTML
<div class="info">
<p>За допомогою властивості <code>margin</code> ми можемо встановити відступи для елементу.</p>
<p>Нижче розташований блок зі статичною шириною <em>250px</em>. За допомогою відступів (<em>0 auto</em>) ми можемо розташувати його ідеально по центру сторінки.</p>
</div>
<div class="wrapper">
<div class="block">Я відцентрований! :)</div>
</div>CSS
* {
box-sizing: border-box;
}
body {
font-family: monospace;
font-size: 17px;
}
.info {
padding: 16px;
}
code {
font-weight: 700;
color: #444;
border-bottom: 2px solid #666;
}
.block {
margin: 0 auto;
background-color: gold;
width: 250px;
text-align: center;
line-height: 150px;
}Схлопування відступів: у звичайному потоці 30px + 30px дають 30px, а в flex — повні 60px.
HTML
<p>Звичайний потік — відступи схлопнулись:</p>
<div class="wrap flow">
<div class="box a">margin-bottom: 30px</div>
<div class="box b">margin-top: 30px</div>
</div>
<p>Той самий код у flex-контейнері — відступи склались:</p>
<div class="wrap flexed">
<div class="box a">margin-bottom: 30px</div>
<div class="box b">margin-top: 30px</div>
</div>CSS
.wrap {
width: 280px;
border: 1px solid #666;
}
.flexed {
display: flex;
flex-direction: column;
}
.box {
background: #dbeafe;
padding: 8px;
}
.a {
margin-bottom: 30px;
}
.b {
margin-top: 30px;
}Коментарі
Коментарів ще немає — будьте першим!