CSS indrykning

Denne elements indre kantmargener er 70px.

CSS indrykning

CSS padding Egenskaben bruges til at skabe plads omkring elementets indhold inden for definerede kanter.

Gennem CSS kan du fuldstændigt kontrollere indre kantmargener (fyld). Der er egenskaber, der kan indstille indre kantmargener for hver side (øverst, højre, nederst og venstre) af et element.

Padding - Enkelt kant

CSS har egenskaber til at specificere indre kantmargener for hver side af et element:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Alle indre kantmargener kan indstilles til følgende værdier:

  • length - Angiv indre kantmargener med enheder som px, pt, cm osv.
  • % - Angiv indre kantmargener som en procentdel af indholdsbredden
  • inherit - Angiv at indre kantmargener skal arves fra forældrelementet

Tip:Negative værdier er ikke tilladt.

Eksempel

Indstil forskellige indre kantmargener til alle fire kanter af <div>-elementet:

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Prøv det selv

Padding - Kortformet egenskab

For at reducere kode kan alle indre kantmargener indstilles i en egenskab.

padding Egenskaben er en kortformet egenskab for følgende indre marginegenskaber:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Arbejdsprincippet er som følger:

Hvis padding Egenskaben har fire værdier:

  • padding: 25px 50px 75px 100px;
    • Øvre indre margin er 25px
    • Højre indre margin er 50px
    • Nedre indre margin er 75px
    • Venstre indre margin er 100px

Eksempel

Brug en kortformet egenskab med fire værdier:

div {
  padding: 25px 50px 75px 100px;
}

Prøv det selv

Hvis padding Egenskaben har tre værdier:

  • padding: 25px 50px 75px;
    • Øvre indre margin er 25px
    • Højre og venstre indre margin er 50px
    • Nedre indre margin er 75px

Eksempel

Brug en kortformet egenskab med tre værdier:

div {
  padding: 25px 50px 75px;
}

Prøv det selv

Hvis padding Egenskaben har to værdier:

  • padding: 25px 50px;
    • Øvre og nedre indre margin er 25px
    • Højre og venstre indre margin er 50px

Eksempel

Brug en kortformet egenskab med to værdier:

div {
  padding: 25px 50px;
}

Prøv det selv

Hvis padding Egenskaben har en værdi:

  • padding: 25px;
    • Alle fire indre margin er 25px

Eksempel

Brug en kortformet egenskab med en værdi:

div {
  padding: 25px;
}

Prøv det selv

Indre margin og elementbredde

CSS width Egenskaben specificerer bredden af elementets indholdsområde. Indholdsområdet er det indre af elementet (bokse-model) inklusive indre margin, kant og ekstern margin.

Derfor, hvis elementet har en specificeret bredde, vil den indre margin, der tilføjes til elementet, blive lagt til elementets samlede bredde. Dette er ofte ikke det ønskede resultat.

Eksempel

Her er <div>-elementets bredde 300px. Men, det faktiske bredde af <div>-elementet vil være 350px (300px + venstre indre margin 25px + højre indre margin 25px):

div {
  width: 300px;
  padding: 25px;
}

Prøv det selv

Hvis du vil holde bredden på 300px, uanset mængden af fyldning, kan du bruge box-sizing Egenskab. Dette vil føre til, at elementet holder sin bredde. Hvis du tilføjer indre margin, vil det tilgængelige indholdsområde blive mindre.

Eksempel

Brug egenskaben box-sizing til at holde bredden på 300px, uanset mængden af fyldning:

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

Prøv det selv

Flere eksempler

Indstil venstre indre margin
Dette eksempel viser, hvordan du indstiller den venstre indre margin for <p>-elementet.
Indstil højre indre margin
Dette eksempel viser, hvordan du indstiller den højre indre margin for <p>-elementet.
Indstil øvre indre margin
Dette eksempel viser, hvordan du indstiller den øvre indre margin for <p>-elementet.
Indstil nedre indre margin
Dette eksempel viser, hvordan du indstiller den nedre indre margin for <p>-elementet.

Alle CSS indre marginegenskaber

Egenskab Beskrivelse
padding En kortformet egenskab til at indstille alle indre marginegenskaber i én sætning.
padding-bottom Indstil elementets nedre indre margin.
padding-left Indstil elementets venstre indre margin.
padding-right Indstil elementets højre indrykning.
padding-top Indstil elementets øverste indrykning.

Udvidet læsning

Ekstrabog:Bokmodel: CSS indrykning