Height & Width – Guida CSS

In questo articolo imparerai ad impostare e ridimensionare gli oggetti HTML con gli attributi CSS “Height” e “Width”, ovvero scoprirai come gestire l’altezza e la larghezza degli elementi con le regole di stile CSS nel tuo sito web.

Attributi height e width in CSS

Tra gli attributi più utilizzati e conosciuti del CSS, troviamo certamente quelli per la modifica delle dimensioni degli elementi HTML. Stiamo parlando di “height” e “width” (altezza e larghezza) che con i relativi valori personalizzati, permettono di ridimensionare ogni oggetto presente in una pagina web.

Questi attributi sono fondamentali da conoscere, poiché la progettazione del layout di una pagina HTML si poggia su di loro.

Basti pensare ad un menu, al logo di un sito, all’header o al footer, alle aree di testo e alle immagini; ognuno di questi hanno delle dimensioni ben definite grazie a “height” e “width” nei fogli di stile CSS.

In questa guida vedremo in dettaglio come impostarli correttamente e i valori da utilizzare.

Descrizione

Height è l’attributo CSS per impostare l’altezza di un elemento HTML, width è quello da usare per impostare la larghezza.

Le dimensioni risultanti dai valori di height e width non comprendono quelle padding, borders e margin, che andranno cacolate e impostate separatamente.

I valori che seguono queste due keyword sono differenti e variano in base alle esigenze di progettazione. questi possono essere personalizzati con unità di misura specifiche:

• Pixel (px)
• Punti (pt)
• Percentuale rispetto all’elemento padre (%)
• Centimetri (cm)
• Percentuale rispetto alla larghezza dello schermo (vw)
• Percentuale rispetto all’altezza dello schermo (vh)
• Altre unità di misura…

In alternativa, i valori pre-impostati di sistema sono i seguenti:

• Auto – Misura automatica;
• Initial – Valori predefiniti;
• Inherit – Misura ereditata dall’elemento padre;
• Unset – Non impostata.

Qui alcuni esempi:

div{
   height:200px;
   width:50%;
}

textarea{
   height:30vh;
   width:70vw;
}

p{
   height:auto;
   width:inherit;
}

La dimensione in percentuale (%) è basata sulle dimensioni originali dell’elemento padre (contenitore). Se questo è assente, la percentuale verrà calcolata dal body della pagina web.

Limiti

Assegnando valori dinamici come una percentuale rispetto alle dimensioni dello schermo in uso, o in caso di ridimensionamento automatico/manuale degli elementi, potrebbe essere utile indicare anche le dimensioni massime e minime che questi possono raggiungere.

Per limiti stiamo ad indicare proprio dei valori speciali per l’altezza e larghezza che un elemento non può superare.

Per indicare questi limti, facciamo uso dei seguenti attributi aggiuntivi:

• max-height – Altezza massima
• max-width – Larghezza massima
• min-height – Altezza minima
• min-width – Larghezza minima

I valori assegnabili sono i medesimi di quelli visti in precedenza.

Vediamo alcuni esempi:

#myDiv{
   height:50%;
   width:80%;
   max-height:500px;
   max-width:700px;
}

.menu{
   height:auto;
   width:100%;
   min-height:40px;
}

Visualizza il programma completo del corso CSS

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle