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.
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.
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:
In alternativa, i valori pre-impostati di sistema sono i seguenti:
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.
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:
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
[…] ⇨
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti: