CSS Height and Width

De breedte van dit element is 100 procent.

CSS instellen van hoogte en breedte

height en width Eigenschap wordt gebruikt om de hoogte en breedte van een element in te stellen.

De height en width-eigenschappen omvatten geen binnenruimte, rand of marge. Ze stellen de hoogte/breedte van het gebied binnen de binnenruimte, rand en marge in!

CSS hoogte en breedte waarden

height en width Eigenschap kan de volgende waarden instellen:

  • auto - Standaard. De browser berekent hoogte en breedte.
  • length - Definieer hoogte/breedte met behulp van px, cm, etc.
  • % - Definieer hoogte/breedte met behulp van de百分比 van het inhoudsblok.
  • initial - De hoogte/breedte instellen op de standaardwaarde.
  • inherit - Van de ouderwaarde afnemen hoogte/breedte.

CSS hoogte en breedte voorbeeld

De hoogte van dit element is 200 pixels, de breedte is 50%

Voorbeeld

Stel de hoogte en breedte van een <div>-element in:

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

Probeer het zelf uit

De hoogte van dit element is 100 pixels, de breedte is 500 pixels.

Voorbeeld

Stel de hoogte en breedte van een ander <div>-element in:

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

Probeer het zelf uit

Let op:Onthoud,height en width Eigenschap omvat geen binnenruimte, rand of marge! Ze stellen de hoogte/breedte van het gebied binnen de binnenruimte, rand en marge in!

Instellen van max-width

max-width Eigenschap wordt gebruikt om de maximale breedte van een element in te stellen.

kan worden gespecificeerd met een lengtewaarde (bijvoorbeeld px, cm, etc.) of met een percentage van de inhoudsblok (％), of kan het worden ingesteld op none (standaardwaarde. Dit betekent dat er geen maximale breedte is).

Wanneer het browservenster kleiner is dan de breedte van het element (500px), vindt de vorige <div> problemen. Vervolgens voegt de browser een horizontale scrollbalk toe aan de pagina.

In dit geval, gebruik max-width Kan de behandeling van kleine vensters door de browser verbeteren.

Tip:Sleep het browservenster naar een breedte kleiner dan 500px om het verschil tussen de twee div's te zien!

De hoogte van dit element is 100 pixels, de maximale breedte is 500 pixels.

De hoogte van dit element is 100 pixels, de maximale breedte is 500 pixels.

Opmerking:max-width De waarde van de eigenschap overschrijft width(Breedte).

Voorbeeld

De hoogte van dit <div>-element is 100 pixels, de maximale breedte is 500 pixels:

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

Probeer het zelf uit

Meer voorbeelden

Instellen van de hoogte en breedte van een element
Dit voorbeeld toont hoe je de hoogte en breedte van verschillende elementen instelt.
Instellen van de hoogte en breedte van een afbeelding met percentages
Dit voorbeeld toont hoe je de hoogte en breedte van een afbeelding instelt met behulp van procentwaarden.
Instellen van de minimale en maximale breedte van een element
Dit voorbeeld toont hoe je de minimale en maximale breedte van een element instelt met behulp van pixelwaarden.
Stel de minimale en maximale hoogte van het element in
Dit voorbeeld demonstreert hoe je de minimale en maximale hoogte van een element instelt met pixelwaarden.

Stel CSS maat-eigenschappen in

Eigenschap Beschrijving
height Stel de hoogte van het element in.
max-height Stel de maximale hoogte van het element in.
max-width Stel de maximale breedte van het element in.
min-height Stel de minimale hoogte van het element in.
min-width Stel de minimale breedte van het element in.
width Stel de breedte van het element in.