CSS: dimensioni effettive di un elemento
This entry was posted on November 13th, 2009 and is filed under CSS.
L’articolo di oggi tratta sicuramente una delle basi del CSS ma ci tengo a trattarlo perchè in questi giorni ho avuto modo di notare che molti all’inizio trascurano questo dettaglio, affermando che facendo le prove si soccombe comunque al problema. Niente di più sbagliato secondo me ma veniamo all’articolo.
Quando si realizza un layout web due delle proprietà fondamentali di un elemento sono le sue dimensioni in larghezza e in altezza. Sappiamo bene che per assegnare le dimensioni ad un oggetto le proprietà sono le seguenti:
element {
width: 250px; //larghezza
height: 100px; //altezza
}
Le dimensioni effettive di un elemento però non sono quelle impostate da queste due proprietà ma dipendono anche da altre caratteristiche dell’oggetto quali:
- padding
- border
- margin
Le dimensioni dell’oggetto infatti vengono influenzate dai valori assegnati a tali proprietà.
Vediamo quindi da cosa è composto un elemento con un’immagine:
Al centro dell’immagine vediamo l’oggetto con le sue effettive dimensioni, a seguire il padding dell’elemento, il bordo e, infine, il margine. Tutte queste proprietà vanno sommate alle dimensioni iniziali per stabilire la dimensione effettiva e, di conseguenza non possono essere trascurate.
Come calcolare le dimensioni effettive
Abbiamo quindi capito che bisogna fare delle somme per arrivare alla larghezza e all’altezza di un elemento. Un errore, anche molto banale, che all’inizio si compie è quello di sommare solo una volta i valori delle proprietà, trascurando il fatto che esse si ripetono.
Guardando l’immagine infatti notiamo che la larghezza effettiva è data dal valore del width, più i valori del padding, del border e del margin destri e sinistri.
La formula quindi è molto semplice:
Larghezza: valori proprietà left + width + valori proprietà right
Altezza: valori proprietà top + height + valori proprietà bottom
Benvenuto! Mi chiamo