Altezza e larghezza CSS
Il CSS heighte widthle proprietà vengono utilizzati per impostare l'altezza e la larghezza di un elemento.
La proprietà CSS max-widthviene utilizzata per impostare la larghezza massima di un elemento.
CSS Impostazione di altezza e larghezza
Le proprietà heighte widthvengono utilizzate per impostare l'altezza e la larghezza di un elemento.
Le proprietà di altezza e larghezza non includono spaziatura interna, bordi o margini. Imposta l'altezza/larghezza dell'area all'interno del riempimento, del bordo e del margine dell'elemento.
Altezza e larghezza CSS Valori
Le proprietà heighte widthpossono avere i seguenti valori:
auto- Questa è l'impostazione predefinita. Il browser calcola l'altezza e la larghezzalength- Definisce l'altezza/larghezza in px, cm ecc.%- Definisce l'altezza/larghezza in percentuale del blocco contenitoreinitial- Imposta l'altezza/larghezza sul valore predefinitoinherit- L'altezza/larghezza verrà ereditata dal suo valore padre
Esempi di altezza e larghezza CSS
Esempio
Imposta l'altezza e la larghezza di un elemento <div>:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}
Esempio
Imposta l'altezza e la larghezza di un altro elemento <div>:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}
Nota: ricorda che le proprietà heighte widthnon includono spaziatura interna, bordi o margini! Impostano l'altezza/larghezza dell'area all'interno del riempimento, del bordo e del margine dell'elemento!
Impostazione della larghezza massima
La max-widthproprietà viene utilizzata per impostare la larghezza massima di un elemento.
max-widthPuò essere specificato in valori di lunghezza , come px, cm, ecc., o in percentuale (%) del blocco contenitore, o impostato su nessuno (questo è l'impostazione predefinita. Significa che non esiste una larghezza massima).
Il problema con quanto <div>sopra si verifica quando la finestra del browser è più piccola della larghezza dell'elemento (500px). Il browser aggiunge quindi una barra di scorrimento orizzontale alla pagina.
L'utilizzo max-widthinvece, in questa situazione, migliorerà la gestione da parte del browser delle finestre di piccole dimensioni.
Suggerimento: trascina la finestra del browser su una larghezza inferiore a 500 px, per vedere la differenza tra i due div!
Nota: se per qualche motivo utilizzi sia la
widthproprietà che la
max-widthproprietà sullo stesso elemento e il valore della
widthproprietà è maggiore della
max-widthproprietà; la
max-widthproprietà verrà utilizzata (e la
widthproprietà verrà ignorata).
Esempio
Questo elemento <div> ha un'altezza di 100 pixel e una larghezza massima di 500 pixel:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}
Provalo tu stesso - Esempi
Questo esempio mostra come impostare l'altezza e la larghezza di diversi elementi.
Questo esempio mostra come impostare l'altezza e la larghezza di un'immagine utilizzando un valore percentuale.
Questo esempio mostra come impostare una larghezza minima e una larghezza massima di un elemento utilizzando un valore in pixel.
Questo esempio mostra come impostare un'altezza minima e un'altezza massima di un elemento utilizzando un valore in pixel.
Tutte le proprietà delle dimensioni CSS
| Property | Description |
|---|---|
| height | Sets the height of an element |
| max-height | Sets the maximum height of an element |
| max-width | Sets the maximum width of an element |
| min-height | Sets the minimum height of an element |
| min-width | Sets the minimum width of an element |
| width | Sets the width of an element |