Diferența dintre marjă și umplutură

Margin vs Padding
 

Diferența dintre marjă și umplutură este un aspect important în CSS deoarece marja și umplutura sunt două concepte importante folosite în CSS pentru a oferi distanțe între diferite elemente. Plăcuțele și marginile nu sunt interschimbabile și au scopuri diferite, deci trebuie utilizate în mod corespunzător. Plăcuirea este spațiul dintre conținut și marginea unui bloc. Marja, pe de altă parte, este spațiul din afara graniței unui bloc. Marginea separă blocurile de blocurile adiacente, în timp ce umplutura separă chenarul de conținut.

Ce este Padding?

În CSS (Foi de stil cascadă), umplutura este spațiul păstrat între conținut și limită. Se separă conținutul unui bloc de margine. Plăcuța este transparentă și include și imaginea de fundal sau culoarea de fundal a elementului. Cantitatea de umplutură a unui element este specificată prin utilizarea termenului "padding" în codul CSS. De exemplu, pentru a adăuga o umplutură de 25px în jurul conținutului, poate fi folosit următorul cod.

div
lățime: 300px;
înălțime: 300px;
padding: 25px;
frontieră: 25px solid;

Dacă este necesar, pot fi specificate separat valorile de umplutură pentru stânga, dreapta, partea de sus și partea de jos. Următoarea bucată de cod specifică diferite valori de umplutură pentru fiecare parte.

div
lățime: 300px;
înălțime: 300px;
padding-top: 25px;
padding-bottom: 35px;
padding-left: 5px;
padding-right: 10px;
frontieră: 25px solid;

Ce este marja?

În CSS (Cascading Style Sheets), marginea este spațiul din afara graniței. Se separă un bloc de alte blocuri. Marja este, de asemenea, transparentă, dar o mare diferență cu umplutura este că marja nu include imaginile de fond sau culorile de fundal aplicate elementului. Suma marjei în CSS este specificată folosind termenul "marjă". Următoarea bucată de cod a aplicat o marjă de 25px în jurul blocului div.

div
lățime: 320 pixeli;
înălțime: 320px;
frontieră: 5px solid;
margine: 25px;

Pot fi specificate diferite valori pentru diferite laturi ale blocului. Următoarea bucată de cod aplică valori diferite ale marjei pentru fiecare parte.

div
lățime: 320 pixeli;
înălțime: 320px;
frontieră: 5px solid;
margin-top: 25px;
margin-bottom: 35px;
margin-stânga: 5px;
margin-dreapta: 10px;

Care este diferența dintre Margină și Padding?

• Plăcuirea este spațiul dintre graniță și conținut, în timp ce marginea este spațiul din afara graniței.

• Suprafața separă conținutul unui bloc de la margine. Marja separă un bloc de celălalt.

• Plăcuirea constă în imaginile de fundal și culorile de fundal aplicate conținutului, în timp ce marginea nu contează astfel.

• Marginile blocurilor adiacente se pot suprapune în timp ce umplutura nu se suprapune.

Rezumat:

Împingere vs marjă

Padding este spațiul din interiorul marginii unui bloc care separă chenarul de conținut. Marja este spațiul din afara marginii care separă un bloc de blocurile adiacente. O altă diferență este că umplutura include imaginea de fundal și culorile de fundal aplicate în jurul conținutului, în timp ce marginea nu le conține. Marginile blocurilor adiacente se pot suprapune, uneori, atunci când browserul redă pagina, dar pentru împachetare nu se va întâmpla așa ceva.

Imagini Amabilitate:

  1. Modelul cutiei CSS de Felix.leg (CC BY-SA 3.0)