marginВластивість визначає саму зовнішню частину моделі коробки, створюючи простір навколо елемента, поза будь - яких конкретних меж.
Поля встановлюються з використанням довжин, відсотків або ключового слова autoі можуть мати від’ємні значення. Ось приклад:
.box ( margin: 0 3em 0 3em; )margin є скороченою властивістю і приймає до чотирьох значень, показаних тут:
.box ( margin: || || || )Якщо встановлено менше чотирьох значень, відсутні значення приймаються на основі визначених. Наприклад, наступні два набори правил отримають однакові результати:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Таким чином, якщо визначено лише одне значення, це встановлює всі чотири поля до одного і того ж значення. Якщо оголошено три значення, це так margin: (top) (left-and-right) (bottom);.
Будь-яке з окремих полів можна оголосити за допомогою longhand, і в цьому випадку ви б визначили лише одне значення для властивості:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto і центрування
Кожне з властивостей поля також може приймати значення auto. Значення в autoосновному говорить браузеру, щоб він визначив поле для вас. У більшості випадків значення autoбуде еквівалентне значенню 0(яке є початковим значенням для кожного властивості поля), або інший простір, доступний на тій стороні елемента. Однак autoзручно для горизонтального центрування:
.container ( width: 980px; margin: 0 auto; )У цьому прикладі робиться дві речі, щоб відцентрувати цей елемент горизонтально в межах доступного простору:
- Елементу надається задана ширина
- Для лівого та правого полів встановлено значення
auto
Без зазначеної ширини autoзначення, по суті, не мали б ефекту, встановивши ліве і праве поле 0або інше, що є доступним простором у батьківському елементі.
Слід також зазначити, що autoце корисно лише для горизонтального центрування, і тому використання autoдля верхнього та нижнього полів не буде центрувати елемент вертикально, що може заплутати початківців.
Згортаються поля
Вертикальні поля на різних елементах, що торкаються один одного (отже, не мають змісту, відступів або меж, що їх розділяють), згорнуться, утворюючи єдине поле, яке дорівнює більшому із суміжних полів. Це відбувається не на горизонтальних полях (ліворуч та праворуч), а лише на вертикальних (зверху та знизу).
Для ілюстрації візьміть такий HTML:
Collapsing Margins
Example text.І наступний CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )У цьому прикладі h2елементу надається нижнє поле 20px. Елемент абзацу, який безпосередньо слідує за ним у джерелі, має верхнє поле, встановлене в 10 пікселів.
Здається, здоровий глузд припускає, що товщина вертикального поля між h2абзацом і абзацом складатиме загалом 30 пікселів (20 пікселів + 10 пікселів). Але через обвал поля фактична товщина складає 20 пікселів. Це показано на вбудованій ручці нижче:
Хоча поля, що згортаються, на перший погляд можуть здатися неінтуїтивними, вони насправді корисні з кількох причин. По-перше, вони заважають порожнім елементам додавати зайвий, зазвичай небажаний, вертикальний простір полів.
По-друге, вони дозволяють забезпечити більш послідовний підхід до оголошення універсальних полів між елементами сторінки. Наприклад, заголовки зазвичай мають вертикальний простір полів, як і абзаци. Якщо поля не згортаються, заголовки, що слідують за абзацами (або навпаки), часто вимагають скидання полів для одного з елементів, щоб досягти постійної величини вертикальних інтервалів.
По-третє, згортання полів також застосовується до вкладених елементів. Подивіться на наступну ручку:
Тут елемент абзацу має верхнє поле, встановлене div30 пікселів , і вкладене всередину елемента з верхнім полем 40 пікселів. Крім того, h2елемент має нижнє поле 20px.
Знову ж таки, здоровий глузд припускає, що загальний простір вертикального поля тут буде 90 пікселів (20 пікселів + 40 пікселів + 30 пікселів), але замість цього всі поля згортаються в єдине поле 40 пікселів (найвище з трьох). Це корисно в більшості випадків, оскільки немає необхідності перевизначати будь-які верхні поля, щоб видалити зайвий вертикальний простір.
Негативні поля
Як ви могли підозрювати, хоча позитивне значення поля відштовхує інші елементи, негативне поле або тягне сам елемент у цьому напрямку, або тягне інші елементи до нього.
Ось приклад контейнера з заповненням, а заголовок h2 має негативні поля, що тягнуться через це заповнення назад до країв:
Дивіться
найбільш поширений випадок використання ручки для негативних полів від Кріса Койєра (@chriscoyier)
на CodePen.
Ось приклад, коли перший абзац має від’ємне нижнє поле, що тягне наступний абзац проти.
Дивіться
нижній абзац «Негативне поле ручки» Кріса Койєра (@chriscoyier)
на CodePen.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Працює | Працює | Працює | Працює | Працює | Працює | Працює |
IE6 схильний до подвоєної помилки з поплавковою маржею, яку в більшості випадків можна вирішити, додавши display: inlineдо плаваючого елемента.