В 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(която е първоначалната стойност за всяко свойство margin), или каквото и да е място от тази страна на елемента. Въпреки това 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и абзаца ще бъде общо 30px (20px + 10px). Но поради колапса на границите действителната дебелина в крайна сметка е 20px. Това е показано във вградената писалка по-долу:
Въпреки че свиващите се полета на пръв поглед могат да изглеждат неинтуитивни, те всъщност са полезни по няколко причини. Първо, те не позволяват на празните елементи да добавят допълнително, обикновено нежелано, вертикално поле поле.
Второ, те позволяват по-последователен подход за деклариране на универсални полета в елементите на страницата. Например заглавията обикновено имат вертикално поле, както и абзаците. Ако полетата не се свиват, заглавията, които следват абзаци (или обратно), често ще изискват нулиране на полетата на един от елементите, за да се постигне постоянно количество вертикални интервали.
Трето, свиването на полето се отнася и за вложени елементи. Вижте следната писалка:
Тук абзацният елемент има горно поле, зададено на 30 пиксела, и е вложено вътре в divелемент с горно поле от 40 пиксела. Освен това h2елементът има долно поле от 20px.
Отново здравият разум би предположил, че общото пространство на вертикалното поле тук ще бъде 90px (20px + 40px + 30px), но вместо това всички полета се свиват в едно поле от 40px (най-високото от трите). Това е полезно в повечето случаи, тъй като няма нужда да предефинирате някой от горните полета, за да премахнете допълнителното вертикално пространство.
Отрицателни полета
Както може да подозирате, докато положителната стойност на полето отблъсква други елементи, отрицателната граница или ще изтегли самия елемент в тази посока, или ще привлече други елементи към него.
Ето пример за контейнер с подложка и заглавката h2 има отрицателни полета, като се изтегля през тази подложка обратно до краищата:
Вижте случая с
най-често използваната писалка за отрицателни полета от Chris Coyier (@chriscoyier)
на CodePen.
Ето пример, при който първият абзац има отрицателно долно поле, което издърпва следващия абзац.
Вижте
долния абзац на отрицателния маркер
на писалката от Chris Coyier (@chriscoyier) на CodePen.
Поддръжка на браузър
| Chrome | Сафари | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Върши работа | Върши работа | Върши работа | Върши работа | Върши работа | Върши работа | Върши работа |
IE6 е склонен към удвоената грешка с поплавък, която в повечето случаи може да бъде разрешена чрез добавяне display: inlineкъм плаващия елемент.