Differenza tra margin e padding
4K
Search Menu

Differenza tra margin e padding

Popolari in questo momento
Alberto
8 Maggio 2013
2 minute read
Dark Light

In breve

La differenza tra marging e padding nel linguaggio CSS consiste nel fatto che il primo si riferisce allo spazio tra un box e l’altro regolando in diverse misure e con una particolare sintassi, mentre il secondo serve a gestire lo spazio tra il contenuto e il bordo del box che lo contiene. Sono valori essenziali per la buona visualizzazione di un sito e dei contenuti ordinati.

Nel CSS (cascade style sheet) la rappresentazione grafica del contenuto di un sito web può essere descritta utilizzando il modello box, ossia valutando tutti i “contenitori” definiti con l’html all’interno dei quali si posizionano i contenuti (immagini, testi etc). Per determinarne le distanze è possibile utilizzare gli attributi margin e padding.

Margin (dall’inglese, margine) è una proprietà del CSS che definisce lo spazio tra un box e ciò che lo circonda all’interno della pagina web. Consiste in una grandezza lineare (positiva o negativa) esprimibile ad esempio in pixel, em, punti e percentuale, ma può anche esserle attribuito il valore auto; dato che ad ogni box è associabile una posizione top, right, bottom e left (rispettivamente superiore, destra, inferiore e sinistra), per ciascuna di essa è possibile impostare un valore di margin differente, permettendo un grado di personalizzazione molto elevato. La sintassi corretta per definire ad esempio il margin dell’elemento “mondo” (nell’immagine rappresentato dal rettangolo arancione) è il seguente:

#mondo {
margin: 10px;
}
In questo esempio, il margine impostato per ciascun lato dell’elemento “mondo” è di 10px.

#mondo{
margin-top: 10px;
margin-right: 5 px;
margin-bottom: 3 px;
margin-left: 8px;
}
Nel secondo esempio, ogni posizione è caratterizzata da un valore di margin differente; tale proprietà è esprimibile anche in forma abbreviata, procedendo nell’ordine top – right – bottom –  left:

#mondo{
margin: 10px 5px 3px 8px;
}

Differenza tra margin e padding
Schema esemplificativo della differenza tra margin e padding

Padding (dall’inglese, imbottitura) figurativamente parlando rende con efficacia l’idea del suo significato nel CSS: il padding indica, infatti, lo spazio tra il contenuto e il box che lo contiene espresso ad esempio in pixel, em, punti e percentuale. Come per il margin, è possibile indicare un valore top, right, bottom e left.

#mondo{
padding: 10px;
}
In questo esempio, si imposta uno spazio di 10px di padding tra il contenuto e ciascun lato del box che lo contiene.

#mondo{
padding-top: 10px;
padding-right: 5 px;
padding-bottom: 3 px;
padding-left: 8px;
}
Nel secondo esempio il padding è diverso in ciascuna posizione, così come per il secondo esempio visto per il margin; in forma abbreviata:

#mondo{
padding: 10px 5px 3px 8px;
}

Related Posts