CSS højde og bredde

Dette elementets bredde er 100％.

CSS indstiller højde og bredde

height og width egenskab bruges til at indstille elementets højde og bredde.

height og width egenskaber inkluderer ikke indre kantlinjer, kanter eller eksterne margener. De indstiller højden/bredden af området inde i elementets indre kantlinjer, kanter og eksterne margener!

CSS højde og bredde værdier

height og width egenskab kan indstilles til følgende værdier:

  • auto - Standard. Browseren beregner højde og bredde.
  • length - Definer højde/bredde som en længde (f.eks. px, cm osv.).
  • % - Definer højde/bredde som en procentdel af indholdskassen.
  • initial - Sæt højde/bredde til standardværdien.
  • inherit - Arv højde/bredde fra forælderværdien.

CSS højde og bredde eksempel

Dette elementets højde er 200 pixel, og bredden er 50％

Eksempel

Indstil højde og bredde for <div>-elementet:

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Prøv det selv

Dette elementets højde er 100 pixel, og bredden er 500 pixel.

Eksempel

Indstil højde og bredde for et andet <div>-element:

div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}

Prøv det selv

Bemærk:Bemærk:height og width egenskab inkluderer ikke indre kantlinjer, kanter eller eksterne margener! De indstiller højden/bredden af området inde i elementets indre kantlinjer, kanter og eksterne margener!

Indstil max-width

max-width egenskab bruges til at indstille elementets maksimale bredde.

kan specificeres ved længdeværdier (f.eks. px, cm osv.) eller i procent af indholdskassen (%), eller kan den sættes til none (standardværdi. betyder ingen maksimal bredde).

Når browservinduet er mindre end elementets bredde (500px), opstår den tidligere <div> problemer. Derefter tilføjer browseren en vandret rullemenu til siden.

I dette tilfælde bruger man max-width kan forbedre browserens håndtering af små vinduer.

Tip:Træk browservinduet til en bredde mindre end 500px for at se forskellen mellem de to div'er!

Dette elementets højde er 100 pixel, og den maksimale bredde er 500 pixel.

Dette elementets højde er 100 pixel, og den maksimale bredde er 500 pixel.

Bemærk:max-width Værdien af egenskaben vil erstatte width（Bredde）.

Eksempel

Denne <div>-elementets højde er 100 pixel, og den maksimale bredde er 500 pixel:

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Prøv det selv

Flere eksempler

Indstil elementets højde og bredde
Dette eksempel viser, hvordan man indstiller højde og bredde for forskellige elementer.
Indstil billedets højde og bredde ved brug af procent
Dette eksempel viser, hvordan man bruger procentværdier til at indstille billedets højde og bredde.
Indstil elementets minimale og maksimale bredde
Dette eksempel viser, hvordan man bruger pixelværdier til at indstille elementets minimale og maksimale bredde.
Indstil elementets mindste og maksimale højde
Dette eksempel viser, hvordan du bruger pixelværdier til at indstille elementets mindste og maksimale højde.

Indstil CSS mål egenskaber

Egenskab Beskrivelse
height Indstil elementets højde.
max-height Indstil elementets maksimale højde.
max-width Indstil elementets maksimale bredde.
min-height Indstil elementets mindste højde.
min-width Indstil elementets mindste bredde.
width Indstil elementets bredde.