Rutmodellen: CSS marginaler
- Föregående sida CSS kant
- Nästa sida CSS marginalkombination
Det tomma området runt elementets kant är marginalen. Att ställa in marginaler skapar extra 'tomrum' utanför elementet.
Det enklaste sättet att ställa in marginaler är att använda marginalattributet, som accepterar alla längdenheter, procentvärden och negativa värden.
CSS margin-attribut
Det enklaste sättet att ställa in marginaler är att använda Marginalattributet.
Marginalattributet accepterar alla längdenheter, som pixlar, tum, millimeter eller em.
Marginal kan ställas in till auto. Vanligare är att använda längdvärden för marginaler. Följande deklaration sätter 1/4 tum breda tomrum på alla sidor av h1-elementet:
h1 {marginal: 0.25in;}
Följande exempel definierar de fyra sidorna av h1-elementet med olika marginaler, använda längdenheter är pixlar (px):
h1 {marginal: 10px 0px 15px 5px;}
Liksom med inställningar för inre marginaler är ordningen på dessa värden från övre marginal (top) och rör sig klockvis runt elementet:
margn: top right bottom left
Du kan också ange en procentuell värde för margn:
p {margn: 10%;}
Procent är beräknade relativt till föräldrelementets bredd. I detta exempel är marginalen för p-elementet 10% av föräldrelementets bredd.
Standardvärdet för margn är 0, så om inget värde har angetts för margn, kommer ingen marginal att visas. Men i praktiken tillhandahåller webbläsarena för många element fördefinierade stilar, inklusive marginaler. Till exempel genererar en webbläsare en "tom rad" ovanför och under varje element som stöder CSS, inklusive marginaler. Därför kan en webbläsare tillämpa en marginal på ett p-element om ingen marginal har angetts för det. Naturligtvis kommer en specifik deklaration att överskrida standardstilen.
Värdekopiering
Kom ihåg? Vi nämnde värdekopiering i de två första avsnitten. Nu förklarar vi hur du använder värdekopiering.
Ibland anger vi några upprepade värden:
p {margn: 0.5em 1em 0.5em 1em;}
Genom värdekopiering behöver du inte upprepa dessa siffror. Regeln ovan är likvärdig med följande regel:
p {margn: 0.5em 1em;}
Dessa två värden kan ersätta de tidigare 4 värdena. Hur gör man detta? CSS definierar några regler som tillåter att mindre än 4 värden används för marginaler. Reglerna är följande:
- Om värdet för vänster marginal saknas, används värdet för höger marginal.
- Om värdet för nedre marginal saknas, används värdet för övre marginal.
- Om värdet för höger marginal saknas, används värdet för övre marginal.
Nedan visas en mer intuitiv metod för att förstå detta:

I andra ord, om 3 värden har angetts för marginalen, kommer det fjärde värdet (dvs. vänster marginal) att kopieras från det andra värdet (höger marginal). Om två värden har angetts, kommer det fjärde värdet att kopieras från det andra värdet, och det tredje värdet (nedre marginal) kommer att kopieras från det första värdet (övre marginal). I den sista situationen, om endast ett värde har angetts, kommer de andra 3 marginalerna att kopieras från detta värde (övre marginal).
Genom att använda detta enkla mekanism behöver du endast ange nödvändiga värden, utan att tillämpa alla 4 värden, till exempel:
h1 {margn: 0.25em 1em 0.5em;} /* liknar 0.25em 1em 0.5em 1em */ h2 {margn: 0.5em 1em;} /* liknar 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* Ekvivalent till 1px 1px 1px 1px */
Detta sätt har en liten nackdel, du kommer säkert att möta detta problem. Anta att du vill ställa in övre och vänstra marginaler för p-elementet till 20 pixlar, nedre och högra marginaler till 30 pixlar. I detta fall måste det skrivas:
p {margin: 20px 30px 30px 20px;}
På detta sätt får du den effekt du vill ha. Tyvärr kan det inte vara färre värden som behövs i detta fall.
Titta på ett annat exempel. Om du vill att alla marginaler utom vänster marginalen ska vara auto (vänster marginal är 20px):
p {margin: auto auto auto 20px;}
På samma sätt kan du få den effekt du vill ha. Problemet är att skriva dessa auto kan vara besvärligt. Om du bara vill kontrollera marginalen på en ensidig kant på ett element, använd ensidiga marginal egenskaper.
Ensidiga marginal egenskaper
Du kan använda ensidiga marginal egenskaper för att ställa in marginaler för en ensidig kant på ett element. Anta att du vill ställa in vänster marginal för p-elementet till 20px. Använd inte margin (kräver mycket auto), utan använd följande metod:
p {margin-left: 20px;}
Du kan använda följande egenskaper för att bara ställa in marginaler för den aktuella sidan utan att påverka alla andra marginaler:
Du kan använda flera ensidiga egenskaper i en regel, till exempel:
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
Naturligtvis kan det vara lättare att använda margin i detta fall:
p {margin: 20px 30px 30px 20px;}
Oavsett om du använder ensidiga egenskaper eller margin, får du samma resultat. Generellt sett är det lättare att använda margin om du vill ställa in marginaler för flera sidor. Men från dokumentationsvisningens synvinkel spelar det ingen roll vilket sätt du använder, så välj det som är lättare för dig.
Tips och kommentarer
Tips:Netscape och IE definierar standardmarginalvärdet (margin) för body-taggen som 8px. Men inte Opera. Istället definierar Opera standardvärdet för inre fyllning (padding) som 8px, så om du vill justera kanterna på hela webbplatsen och visa dem korrekt i Opera, måste du anpassa padding för body.
CSS marginaltillämpningsexempel:
- Ställ in textens vänstra yttre marginal
- Detta exempel visar hur man ställer in textens vänstra yttre marginal.
- Ställ in textens högra yttre marginal
- Detta exempel visar hur man ställer in textens högra yttre marginal.
- Ställ in textens övre yttre marginal
- Detta exempel visar hur man ställer in textens övre yttre marginal.
- Ställ in textens nedre yttre marginal
- Detta exempel visar hur man ställer in textens nedre yttre marginal.
- Alla yttre marginalattribut i en deklaration.
- Detta exempel visar hur alla yttre marginalattribut kan ställas in i en deklaration.
CSS yttre marginalattribut
Egenskap | Beskrivning |
---|---|
margin | Kortformad egenskap. Ställ in alla yttre marginalattribut i en deklaration. |
margin-bottom | Ställ in elementets nedre yttre marginal. |
margin-left | Ställ in elementets vänstra yttre marginal. |
margin-right | Ställ in elementets högra yttre marginal. |
margin-top | Ställ in elementets övre yttre marginal. |
- Föregående sida CSS kant
- Nästa sida CSS marginalkombination