CSS 外边距

Ekstern margin for dette element er 70px.

Prøv det selv

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;
}

Prøv det selv

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;
}

Prøv det selv

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;
}

Prøv det selv

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;
}

Prøv det selv

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;
}

Prøv det selv

auto værdi

Du kan sætte margin-attributten til autofor 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;
}

Prøv det selv

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;
}

Prøv det selv

Udvidet læsning

Fagbog:Boksmodel: CSS margin