Bokse-model: CSS indrykning

Elementets indrykning ligger mellem rammen og indholdsområdet. Den enkleste egenskab til at kontrollere dette område er padding-egenskaben.

CSS padding-egenskaben definerer det tomme rum mellem elementets kant og indholdet.

CSS padding Egenskab

CSS padding-egenskaben definerer elementets indrykning. Padding-egenskaben accepterer længdeværdier eller procentværdier, men tillader ikke negative værdier.

For eksempel, hvis du ønsker, at alle h1-elementer har 10 pixels indrykning på alle sider, skal du gøre det sådan:

h1 {padding: 10px;}

Man kan også indstille hver sides indrykning i rækkefølgen øvre, højre, nedre og venstre, og hver side kan bruge forskellige enheder eller procentværdier:

h1 {padding: 10px 0.25em 2ex 20%;}

Ensidige indrykningsegenskaber

Også ved at bruge nedenstående fire separate egenskaber, kan man respektive indstille øvre, højre, nedre og venstre indrykning:

Du har måske allerede tænkt på det, men nedenstående regel har samme effekt som den foregående kortform regel:

h1 {
  padding-top: 10px;
  padding-right: 0.25em;
  padding-bottom: 2ex;
  padding-left: 20%;
  }

Procentværdier for indrykning

Som nævnt tidligere kan man indstille procentværdier for elementets indrykning. Procentværdier beregnes i forhold til forældrelseskomponentens width, hvilket er det samme som for margin. Så hvis forældrelseskomponentens width ændres, ændres de også.

Nedenstående regel sætter afsnittets indrykning til 10% af forældrelseskomponentens width:

p {padding: 10%;}

For eksempel: Hvis et afsnits forældrelseskomponent er et div-element, skal dens indrykning beregnes baseret på div's width.

<div style="width: 200px;">
<p>Dette afsnit er indeholdt i en DIV, der har en bredde på 200 pixels.</p>
</div>

Bemærk:Øvre og nedre indrykning er ens med venstre og højre indrykning; dvs. procentværdien for øvre og nedre indrykning sættes i forhold til forældrelses bredde, ikke højde.

CSS indrykningseksample:

Alle indrykningsegenskaber i en erklæring
Dette eksempel viser, hvordan man bruger kortform for at sætte alle indrykningsegenskaber i en erklæring, hvilket kan være et til fire værdier.
Indstil nedre indrykning 1
Dette eksempel viser, hvordan man bruger centimeter for at indstille cellens nedre indrykning.
Indstil nedre indrykning 2
Dette eksempel viser, hvordan man bruger procenter for at indstille cellens nedre indrykning.
Indstil venstre indrykning 1
Dette eksempel viser, hvordan man bruger centimeter for at indstille cellens venstre indrykning.
Indstil venstre indrykning 2
Dette eksempel viser, hvordan man bruger procenter for at indstille cellens venstre indrykning.
Indstil højre indre margen 1
Dette eksempel viser, hvordan man bruger centimeter for at indstille cellens højre indre margen.
Indstil højre indre margen 2
Dette eksempel viser, hvordan man bruger procenter for at indstille cellens højre indre margen.
Indstil øvre indre margen 1
Dette eksempel viser, hvordan man bruger centimeter for at indstille cellens øvre indre margen.
Indstil øvre indre margen 2
Dette eksempel viser, hvordan man bruger procenter for at indstille cellens øvre indre margen.

CSS Indre Margen Egenskab

Egenskab Beskrivelse
padding Kortfattet Egenskab. Virker til at sætte elementets indre margen egenskaber i en enkelt deklaration.
padding-bottom Indstil elementets nedre indre margen.
padding-left Indstil elementets venstre indre margen.
padding-right Indstil elementets højre indre margen.
padding-top Indstil elementets øvre indre margen.