CSS Height și Width. Valori CSS height/width: auto, lenght, %, initial, inherit.

CSS Height și Width

Proprietățiile height și width sunt utilizate pentru a seta înălțimea și lățimea unui element.
Proprietățiile height și width nu includ padding, borders sau margins. Stabilește înălțimea / lățimea (height/width) zonei din interiorul padding-ului, border-ului și marginii elementului.

Valori CSS înălțime / lățime (height/width)

Proprietățiile de înălțime și lățime (height/width) pot avea următoarele valori:

• auto - Aceasta este implicită. Browserul calculează înălțimea și lățimea (height/width).
• lenght - Definește înălțimea / lățimea (height/width) în px, cm etc.
• % - Definește înălțimea / lățimea (height/width) în procente din blocul conținut.
• inițial - Setează înălțimea / lățimea (height/width) la valoarea implicită.
• inherit - Înălțimea / lățimea (height/width) vor fi moștenite de la valoarea sa parentală.

Exemplu:

Setați înălțimea și lățimea (height/width) unui element <div>:

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

Rezultat:

Exemplu:

Setați înălțimea și lățimea (height/width) unui alt element <div>:

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

Rezultat:

Notă: Nu uitați că proprietățiile de înălțime și lățime (height/width) nu includ padding, borders sau margins! Ei setează înălțimea / lățimea zonei din interiorul paddingu-ului, border-ului și marginii elementului!