Padding e Margin
Padding
Tramite il padding viene definito uno spazio tra l’area dei contenuti ed il confine interno del box. Il suo utilizzo è frequente in due circostanze ben precise:
- quando il box ha un bordo (per creare un po’ di distanza tra il contenuto interno al box ed il suo bordo);
- quando il box ha uno sfondo colorato (in modo da creare un effetto visivamente più gradevole in cui il contenuto “non tocca” il perimetro dell’area colorata).
- padding-top (padding superiore)
- padding-bottom (padding inferiore)
- padding-left (padding sinistro)
- padding-right (padding destro)
.box {
padding-top: 10px;
padding-left: 20px;
}Margin
A differenza della prima (che come abbiamo detto definisce una spaziatura interna al box), la proprietà margin assegna un margine esterno al box, quindi “al di fuori” del suo perimetro.
Normalmente margin è utilizzata per distanziare i vari elementi della pagina tra loro.
div.box { margin: 10px; }Mediante questa semplice regola CSS, il nostro box avrà un margine di 10 pixel su tutti i lati.
Dimensioni
Le proprietà per definire le dimensioni dell’elemento sono:
width (larghezza) height (altezza)
che possono essere espresse con diverse unità di misura come cm, mm, px, em, (unità di misura fisse, cioè non cambiano al variare della larghezza dell’elemento contenitore) oppure con il simbolo della percentuale.
% (unità di misura relativa cioè che cambia al variare della larghezza dell’elemento contenitore).
No comment yet, add your voice below!