Altezza e larghezza CSS

L'ampiezza di questo elemento è del 100%.

CSS imposta altezza e larghezza

height e width L'attributo viene utilizzato per impostare l'altezza e la larghezza dell'elemento.

Le proprietà height e width non includono margine interno, bordo o margine esterno. Impostano l'altezza o la larghezza dell'area interna dell'elemento, tra margine interno, bordo e margine esterno.

Valori di altezza e larghezza CSS

height e width L'attributo può impostare i seguenti valori:

  • auto - Predefinito. Il browser calcola altezza e larghezza.
  • length - Definisce altezza/larghezza con px, cm ecc.
  • % - Definisce altezza/larghezza in percentuale del blocco contenitore.
  • initial - Imposta altezza/larghezza su valore predefinito.
  • inherit - Eredita altezza/larghezza dal valore del padre.

Esempio di altezza e larghezza CSS

L'altezza di questo elemento è di 200 pixel, la larghezza è del 50％

Esempio

Impostare l'altezza e la larghezza dell'elemento <div>:

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

Prova tu stesso

L'altezza di questo elemento è di 100 pixel, la larghezza è di 500 pixel.

Esempio

Impostare l'altezza e la larghezza di un altro elemento <div>:

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

Prova tu stesso

Attenzione:Ricorda:height e width L'attributo non include margine interno, bordo o margine esterno! Impostano l'altezza/larghezza dell'area interna dell'elemento, tra margine interno, bordo e margine esterno!

Impostare max-width

max-width L'attributo viene utilizzato per impostare la larghezza massima dell'elemento.

è possibile specificare max-width (larghezza massima) utilizzando valori di lunghezza (ad esempio px, cm ecc.) o percentuale del blocco contenitore (%) e può essere impostato su none (valore predefinito. Significa che non c'è larghezza massima).

Si verifica il caso precedente quando la finestra del browser è più piccola della larghezza dell'elemento (500px) <div> problemi. Poi, il browser aggiungerà una barra di scorrimento orizzontale alla pagina.

In questo caso, utilizzare max-width può migliorare la gestione del browser delle finestre piccole.

Suggerimento:Trascina la finestra del browser a una larghezza inferiore a 500px per vedere la differenza tra i due div!

L'altezza di questo elemento è di 100 pixel, la larghezza massima è di 500 pixel.

L'altezza di questo elemento è di 100 pixel, la larghezza massima è di 500 pixel.

Nota:max-width Il valore dell'attributo sovrascriverà width(larghezza).

Esempio

L'altezza di questo elemento <div> è di 100 pixel, la larghezza massima è di 500 pixel:

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

Prova tu stesso

Più esempi

Impostare l'altezza e la larghezza dell'elemento
Questo esempio dimostra come impostare l'altezza e la larghezza di diversi elementi.
Impostare l'altezza e la larghezza dell'immagine utilizzando i valori percentuali
Questo esempio dimostra come impostare l'altezza e la larghezza dell'immagine utilizzando i valori percentuali.
Impostare la larghezza minima e massima dell'elemento
Questo esempio dimostra come impostare la larghezza minima e massima di un elemento utilizzando i valori di pixel.
Impostare l'altezza minima e massima dell'elemento
Questo esempio dimostra come impostare l'altezza minima e massima dell'elemento utilizzando valori in pixel.

Impostare le proprietà delle dimensioni CSS

Proprietà Descrizione
height Impostare l'altezza dell'elemento.
max-height Impostare l'altezza massima dell'elemento.
max-width Impostare la larghezza massima dell'elemento.
min-height Impostare l'altezza minima dell'elemento.
min-width Impostare la larghezza minima dell'elemento.
width Impostare la larghezza dell'elemento.