CSS 外边距
CSS 外边距
CSS margin
Attributter bruges til at skabe plads omkring elementet uden for ethvert defineret kantbånd.
Gennem CSS kan du fuldt ud kontrollere ekstern margin. Der er nogle attributter, der kan bruges til at indstille ekstern margin for hver side (øverst, højre, nederst og venstre) af et element.
Margin - Enkelt side
CSS har attributter til at specificere ekstern margin for hver side af et element:
margin-top
margin-right
margin-bottom
margin-left
Alle eksterne marginattributter kan indstilles til følgende værdier:
- auto - Browseren beregner ekstern margin
- length - Angiver ekstern margin i enheder som px, pt, cm osv.
- % - Angiver ekstern margin i procent af indholdsbredden af indeholderen
- inherit - Angiver, at marginen skal arves fra forældrelementet
Tip:Tillader negative værdier.
Eksempel
Indstil forskellige eksterne marginer for alle fire kanter af <p>-elementet:
p { margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; }
Margin - kortformelsattribut
For at reducere kode kan man specificere alle eksterne marginattributter i én attribut.
margin
Attributterne er kortformelsattributter for følgende eksterne marginattributter:
margin-top
margin-right
margin-bottom
margin-left
Arbejdsprincippet er som følger:
Hvis margin
Attributterne har fire værdier:
- margin: 25px 50px 75px 100px;
- Øverst eksterne margin er 25px
- Højre eksterne margin er 50px
- Nederst eksterne margin er 75px
- Venstre eksterne margin er 100px
Eksempel
margin-kortformelsattributten har indstillet fire værdier:
p { margin: 25px 50px 75px 100px; }
Hvis margin
Attributten har indstillet tre værdier:
- margin: 25px 50px 75px;
- Øverst eksterne margin er 25px
- Højre og venstre eksterne marginer er 50px
- Nederst eksterne margin er 75px
Eksempel
Brug af at have indstillet tre værdier for margin-kortformelsattributten:
p { margin: 25px 50px 75px; }
Hvis margin
Attributten har indstillet to værdier:
- margin: 25px 50px;
- Øverst og nederst eksterne marginer er 25px
- Højre og venstre eksterne marginer er 50px
Eksempel
Brug af at indstille to værdier for margin-kortformelsattributten:
p { margin: 25px 50px; }
Hvis margin
Attributten har indstillet en værdi:
- margin: 25px;
- De fire eksterne marginer er alle 25px
Eksempel
Brug af at indstille en værdi for margin-kortformelsattributten:
p { margin: 25px; }
auto værdi
Du kan sætte margin-attributten til auto
for at centere elementet horisontalt i sin container.
Herefter vil elementet tage den angivne bredde, og den resterende plads vil blive fordelt ligeligt mellem venstre og højre kanter.
Eksempel
Brug af margin: auto
:
div { width: 300px; margin: auto; border: 1px solid red; }
inherit værdi
Dette eksempel gør <p class="ex1"> elementets venstre margin arve fra forældrelementet (<div>):
Eksempel
Brug af inherit værdi:
div { border: 1px solid red; margin-left: 100px; } p.ex1 { margin-left: inherit; }
Udvidet læsning
Fagbog:Boksmodel: CSS margin