Gli elementi possono avere dimensioni diverse all'interno della pagina:
Per questo motivo, è importante imparare come scegliere la dimensione degli elementi in una pagina. Le proprietà CSS che si usano in questo caso sono: width, height, max-width, max-height, min-width e min-height.
Le proprietà CSS width e height permettono di impostare, rispettivamente, la larghezza e altezza di un elemento all'interno della pagina.
Ecco i valori che puoi utilizzare:
auto, dove il browser calcola autonomamente la larghezza e altezza. Se l'elemento è vuoto, le due dimensioni saranno nulle. È il valore di default.numero, ovvero una dimensione specifica in un'unità di misura, come i px.%, definisce larghezza e altezza in base all'elemento che lo contiene.inherit, che imposta la stessa larghezza e altezza dell'elemento che lo contiene.Ecco un esempio di width e height, impostando anche un colore allo sfondo dell'elemento per renderlo visibile:
<div>Ciao a tutti!</div>
<style>
div {
width: 50%;
height: 200px;
background-color: burlywood;
}
</style>Nell'esempio, il <div> ha metà larghezza dell'elemento contenitore (<body>) e un'altezza di 200px.
Nelle dimensioni degli elementi, è sempre utile preferire una larghezza in percentuale: in questo modo, anche se lo schermo dei dispositivi cambia, l'elemento rimane sempre visibile in modo uguale.
Le proprietà CSS max-width e max-height sono utilizzate per limitare la larghezza e l'altezza massima di un elemento. Queste proprietà sono particolarmente utili per garantire che gli elementi non superino determinate dimensioni indipendentemente dalla dimensione dello schermo o del contenitore in cui si trovano.
Infatti, si potrebbe verificare un problema quando, per esempio, si specifica una larghezza di 400px e lo schermo è più piccolo di 400px. In questo caso, parte dell'elemento uscirebbe dalla pagina e non sarebbe visibile.
<div>Ciao a tutti! Questo div non è parzialmente visibile per i dispositivi più piccoli
di 400 px.</div>
<style>
div {
width: 400px;
height: 200px;
background-color: burlywood;
}
</style>Per ovviare a questo problema, ecco che ci vengono in aiuto max-width e max-height: impostando una larghezza del 100% e un max-width di 400px l'elemento risulterà visibile in qualsiasi dispositivo. Superati i 400px, l'elemento non aumenterà più la sua larghezza:
<div>Ciao a tutti! Questo div è sempre visibile anche nei dispositivi più piccoli
di 400 px.</div>
<style>
div {
width: 100%;
max-width: 400px;
height: 200px;
background-color: burlywood;
}
</style>Lo stesso vale per max-height, anche se poco utilizzato, in quanto limita l'altezza massima di un elemento.
<div>Bene non seppi, fuori del prodigio che schiude la divina Indifferenza: era la statua nella
sonnolenza del meriggio, e la nuvola, e il falco alto levato - Eugenio Montale</div>
<style>
div {
width: 100%;
height: 100%;
max-height: 400px;
background-color: burlywood;
}
</style>Le proprietà CSS min-width e min-height sono utilizzate per impostare la larghezza e l'altezza minima di un elemento. Queste proprietà garantiscono che un elemento non scenda al di sotto di una dimensione specifica, indipendentemente dalle dimensioni dello schermo o del contenitore in cui si trova.
Queste proprietà vengono utilizzate abbastanza raramente, ma per completezza ve le riportiamo in questo esempio:
<button>Apri il menu delle prenotazioni</button>
<style>
/* Impedisce che il pulsante sia troppo piccolo per essere cliccato */
button {
min-width: 80px;
min-height: 40px;
background-color: lightgrey;
}
</style>