Conoscere la differenza tra imbottitura e margini

I margini e l'imbottitura possono creare confusione perché, in qualche modo, sembrano la stessa cosa: uno spazio bianco attorno a un'immagine o a un oggetto. Ecco cosa devi sapere come web designer sulle loro differenze.

Imbottitura

Il riempimento è lo spazio tra un'immagine o il contenuto di una cella e il suo bordo esterno. Nell'immagine sottostante, il riempimento è l'area gialla attorno al contenuto. In questo caso, l'imbottitura gira completamente intorno al contenuto: lato superiore, inferiore, destro e sinistro. Puoi specificare la quantità di riempimento (in percentuale, pixel, punti, ecc.) per ciascun lato e non devono essere uguali. In questo modo, puoi posizionare il contenuto all'interno di un elemento.

Margini

Al contrario, i margini sono gli spazi al di fuori il confine di un elemento, tra l'elemento e ciò che è adiacente ad esso. Nell'immagine, il margine è l'area bianca all'esterno dell'intero oggetto. Come il padding, il margine gira completamente intorno al contenuto in questo esempio: sui lati superiore, inferiore, destro e sinistro. Puoi utilizzare i margini per posizionare i div e altri elementi in una pagina.