Marginal - CSS-tricks

Den marginegenskapen definierar den yttersta delen av lådan modell, vilket skapar utrymme runt ett element, utanför några definierade gränser.

Marginaler ställs in med längder, procentsatser eller nyckelordet autooch kan ha negativa värden. Här är ett exempel:

.box ( margin: 0 3em 0 3em; )

margin är en stenografisk egenskap och accepterar upp till fyra värden, som visas här:

.box ( margin: || || || )

Om färre än fyra värden är inställda antas de saknade värdena baserat på de som har definierats. Följande två regeluppsättningar skulle till exempel få identiska resultat:

.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )

Således, om endast ett värde definieras, sätter detta alla fyra marginalerna till samma värde. Om tre värden deklareras är det margin: (top) (left-and-right) (bottom);.

Vilken som helst av de enskilda marginalerna kan deklareras med långhand, i vilket fall du bara definierar ett värde per egendom:

.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )

auto och centrering

Var och en av marginalegenskaperna kan också acceptera ett värde på auto. Ett värde på autoberättar i grunden webbläsaren att definiera marginalen för dig. I de flesta fall kommer värdet autoatt vara ekvivalent med ett värde på 0(vilket är initialvärdet för varje marginalegenskap) eller vad som helst utrymme som finns tillgängligt på den sidan av elementet. Det autoär dock praktiskt för horisontell centrering:

.container ( width: 980px; margin: 0 auto; )

I det här exemplet görs två saker för att centrera detta element horisontellt inom det tillgängliga utrymmet:

• Elementet ges en specificerad bredd
• Vänster och höger marginal är inställd på auto

Utan den angivna bredden skulle autovärdena i princip inte ha någon effekt, om de vänstra och högra marginalerna ställdes till 0eller annat vad som är tillgängligt utrymme i det överordnade elementet.

Det bör också påpekas att det endast autoär användbart för horisontell centrering, och att använda autoför topp- och bottenmarginaler kommer inte att centrera ett element vertikalt, vilket kan vara förvirrande för nybörjare.

Kollapsande marginaler

Vertikala marginaler på olika element som berör varandra (därmed har inget innehåll, vaddering eller gränser som skiljer dem) kommer att kollapsa och bilda en enda marginal som är lika med den större av de angränsande marginalerna. Detta sker inte i horisontella marginaler (vänster och höger), bara vertikalt (upp och ned).

För att illustrera, ta följande HTML:

Collapsing Margins
Example text.

Och följande CSS:

h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )

I det här exemplet h2ges elementet en nedre marginal på 20 pixlar. Punktelementet, som omedelbart följer det i källan, har en toppmarginal inställd på 10 pixlar.

Sunt förnuft tycks antyda att den vertikala margintjockleken mellan h2och stycket skulle vara totalt 30 pixlar (20 pixlar + 10 pixlar). Men på grund av marginalkollaps blir den faktiska tjockleken 20 pixlar. Detta visas i den inbäddade pennan nedan:

Kolla in den här pennan!

Även om kollapsande marginaler kan verka ointuitiva vid första anblicken, är de faktiskt användbara av några anledningar. Först förhindrar de att tomma element lägger till extra, vanligtvis oönskat, vertikalt marginalutrymme.

För det andra möjliggör de en mer konsekvent metod för att deklarera universella marginaler över sidelement. Till exempel har rubriker ofta vertikalt marginalutrymme, och stycken har det också. Om marginaler inte kollapsade, skulle rubriker som följer stycken (eller vice versa) ofta kräva att marginalerna återställs på ett av elementen för att uppnå en jämn mängd vertikalt avstånd.

För det tredje gäller marginalkollaps även för kapslade element. Titta på följande penna:

Kolla in den här pennan!

Här har styckelementet en toppmarginal inställd på 30 pixlar och kapslas inuti ett divelement med en toppmarginal på 40 pixlar. Dessutom har h2elementet en nedre marginal på 20 pixlar.

Återigen skulle sunt förnuft föreslå att det totala vertikala marginalutrymmet här skulle vara 90px (20px + 40px + 30px), men istället kollapsar marginalerna till en enda 40px-marginal (den högsta av de tre). Detta är användbart i de flesta fall eftersom det inte finns något behov av att omdefiniera någon av de övre marginalerna för att ta bort det extra vertikala utrymmet.

Negativa marginaler

Som du kanske misstänker, medan ett positivt marginalvärde skjuter bort andra element, kommer en negativ marginal antingen att dra elementet själv i den riktningen eller dra andra element mot det.

Här är ett exempel på en behållare med stoppning, och rubriken h2 har negativa marginaler som drar sig genom den stoppningen tillbaka till kanterna:

Se
penns vanligaste fall för negativa marginaler av Chris Coyier (@chriscoyier)
på CodePen.

Här är ett exempel där första stycket har en negativ bottenmarginal, vilket drar nästa stycke mot.

Se Pen
Negative Margin som drar bottenavsnittet av Chris Coyier (@chriscoyier)
på CodePen.

Webbläsarstöd

Krom	Safari	Firefox	Opera	IE	Android	iOS
Arbetar	Arbetar	Arbetar	Arbetar	Arbetar	Arbetar	Arbetar

IE6 är benägen för det fördubblade flottörmarginsfelet, som kan lösas i de flesta fall genom att lägga display: inlinetill det flytande elementet.