Skip to main content

Conoscere il riempimento e i margini

Diseño Web 19 - Elementos Visuales (Giugno 2025)

Diseño Web 19 - Elementos Visuales (Giugno 2025)
Anonim

Se non sai qual è la differenza tra padding e margini, non sei da solo. È una domanda frequente e ha messo in crisi molti web designer. Con questo breve tutorial, impara a distinguere tra i due.

Capire la differenza

Margini e padding possono confondere il novizio Web designer e talvolta anche i designer con più esperienza. Dopotutto, in qualche modo, sembrano la stessa cosa: lo spazio bianco attorno ad un'immagine o ad un oggetto.

Il riempimento è semplicemente lo spazio all'interno del bordo tra il bordo e l'immagine reale o il contenuto della cella. Nell'immagine, il riempimento è l'area gialla attorno al contenuto. Si noti che il riempimento si estende completamente attorno al contenuto. Troverai imbottitura sui lati superiore, inferiore, destro e sinistro.

D'altra parte, i margini sono gli spazi al di fuori del bordo, tra il bordo e gli altri elementi accanto a questo oggetto. Nell'immagine, il margine è l'area wite al di fuori dell'intero oggetto. Nota che, come il padding, il margine si estende completamente attorno al contenuto. Ci sono margini in alto, in basso, a destra ea sinistra.

Consigli utili

Tieni presente che se hai intenzione di fare cose davvero fantasiose con margini e padding, alcuni browser, come Internet Explorer, non implementano correttamente il modello di box. Ciò significa che le tue pagine appariranno diverse (e talvolta molto diverse) in altri browser.