Вітаю. Цього разу друга частина з серії дописів про принцип коробки у CSS (Box Model). Сьогодні будемо говорити про властивість margin (береги). Якщо відчуваєте, що не зовсім “у темі”, будьте ласкаві, перегляньте допис “Принцип коробки у CSS: загальні відомості (част. І)”
Margin – задає величину відступу для кожного краю елемента від краю батьківського елемента. Якщо в елемента немає батька, відступом буде відстань від краю елемента до краю вікна браузера.
Однак, треба враховувати, що для самого вікна браузера (клієнтської області) за замовчуванням також встановлені відступи (береги). Щоб позбавитися їх, необхдіно задати нульове значення margin для селектора <body>:
* {margin:0; padding:0}
Селектор * (астериск) означає, що це правило стосується усіх елементів.
Величину берегів (margin) можна вказувати в пікселях (px), відсотках (%) та інших допустимих для CSS одиницях. Аргумент auto вказує, що значення берегів повинно бути автоматично розраховано браузером.
Аби задати відступ для конкретного краю окремо, можна скористатися такими властивостями:
- margin-top – береги вгорі
- margin-right – береги праворуч
- margin-bottom – береги знизу
- margin-left – береги ліворуч
Значення для берегів вказуються за годинниковою стрілкою, починаючи з margin-top:
Можна використовувати одне, два, три або чотири значення (стислий стиль). Ефект залежить від кількості значень:
1 значення – береги буде встановлено однаковими для всіх країв елемента:
margin: 10px (береги від усіх чотирьох країв становитимуть 10 пікселів)
2 значення – перший аргумент (тобто значення) встановлює береги для верхнього та нижнього країв, другий – для лівого та правого країв:
margin: 20px 30px (береги згори та знизу становлять 20px , а праворуч та ліворуч – 30px)
3 значення – перший аргумент задає розмір берегів для верхнього краю, другий – одночасно для лівого та правого краю, третій – для нижнього краю:
margin: 10px 30px 10px (береги згори 10px, ліворуч та праворуч 30px , знизу 10px )
4 значення – встановлюються береги відповідно для верхнього, правого, нижнього і лівого країв:
margin: 10px 20px 30px 50px (згори 10px, праворуч 20px, знизу 30px, ліворуч 50px)
Далі буде …
Завантаження ...
Хочешь отдохнуть? Незабываемый отдых в Крыму. Гостиница «Ореанда».
Про те що різна кількість значень відповідає в кожному випадку за окремі сторони, не знав.
Дякую
Я коли про цю фішку дізнався, подумав, що розробники CSS таки не дурні
[...] відповідні дописи можна перейти за цими посиланнями: Принцип коробки у CSS: margin (частина ІІ) і Принцип коробки у CSS: загальні відомості (част. [...]