Margin

Från Webbling
Hoppa till: navigering, sök

Används för att sätta bredden på ett elements yttermarginal eller margin. Det vill säga avståndet mellan två element (se boxmodellen för mer info). Bredden kan anges med hjälp av alla CSS-måttenheter.

Detta är en samlingsegenskap och man kan ange mellan ett eller fyra värden för att sätta olika marginal på olika sidor.

Om man anger ett värde, kommer det att gälla för marginalen på alla sidor.

Om man anger två värden; Det första gäller för marginalen på topp- och botten, medan det andra värdet gäller för marginalen på höger och vänster sida.

Om man anger tre värden; Det första att ange marginalen på toppen. Det andra på höger- och vänster sida. Det tredje gäller för botten.

Om man anger fyra värden; Det första anger marginalen på toppen. Det andra på höger sida. Det tredje på botten. Det fjärde på vänster sida.

Marginaler kan i vissa fall bete sig på ett krångligt vis. Man brukar säga att de kan falla samman. Vilket innebär att i vissa fall kommer webbläsaren att ersätta det värde du satt med ett annat. Detta gäller främst när objekt som har marginal ligger bredvid varandra. I det enklaste fallet, kommer webbläsaren helt enkelt att välja ut den marginal som är störst ifrån två angränsande block och sätta den andra marginalen till noll. Om ett av elementen har en negativ marginal och en har en positiv, kommer webbläsaren att lägga samman de båda marginalerna. Om bägge elementen har negativ marginal, väljer webbläsaren ut det lägsta värdet. Se sammanfallande marginaler för mer info.

Egenskaper

Parametrar <breddvärde> | inherit
Defaultvärde
Ärvs? Nej
Animerbart? Ja
Fungerar med... Alla element

breddvärdet anger hur mycket marginal som ska vara mellan två element. Värdet kan anges med hjälp av alla CSS-måttenheter.

Exempel

See the Pen WvVBjE by Patrik Grip-Jansson (@PGJ) on CodePen.

Egenskapens definition

http://www.w3.org/TR/CSS2/box.html#propdef-padding