Margini e padding possono creare confusione perché, in un certo senso, sembrano la stessa cosa: uno spazio bianco attorno a un'immagine o un oggetto. Ecco cosa devi sapere tu 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, il padding avvolge completamente il 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 necessariamente gli stessi. In questo modo puoi posizionare il contenuto all'interno di un elemento.
Margini
Al contrario, i margini sono gli spazi al di fuori del bordo di un elemento, tra l'elemento e tutto ciò che gli è adiacente. Nell'immagine, il margine è l'area bianca all'esterno dell'intero oggetto. Come il riempimento, in questo esempio il margine circonda completamente il contenuto: sui lati superiore, inferiore, destro e sinistro. Puoi usare i margini per posizionare div e altri elementi su una pagina.
Testa sempre le tue pagine in vari browser, sistemi operativi (incluso mobile) e dimensioni dello schermo per assicurarti che vengano visualizzate esattamente come desideri.
