Razlika između marže i paddinga

Margin vs Padding
 

Razlika između marže i paddinga je važan aspekt u CSS kao margina i padding su dva važna koncepta koji se koriste u CSS-u za pružanje razmaka između različitih stavki. Obloge i rubove nisu međusobno zamjenjivi i imaju različite svrhe, pa ih treba koristiti na odgovarajući način. Obloga je prostor između sadržaja i obruba bloka. S druge strane, rub je prostor izvan granice bloka. Margin odvaja blokove od susjednih blokova dok padding odvaja obrub od sadržaja.

Što je padding?

U CSS-u (Kaskadne tablice stilova), padding je prostor između sadržaja i obruba. Sadržaj bloka odvaja od njegovog ruba. Obloga je prozirna, a uključuje i pozadinsku sliku ili pozadinsku boju elementa. Količina padova nekog elementa određuje se korištenjem izraza "padding" u CSS kodu. Na primjer, za dodavanje obruba od 25 px oko sadržaja može se koristiti sljedeći kôd.

div
širina: 300px;
visina: 300px;
padding: 25px;
obrub: 25px kruta tvar;

Ako je potrebno, različite vrijednosti paddinga mogu se zasebno navesti i za lijevu, za desnu, gornju i donju. Sljedeći dio koda daje različite vrijednosti paddinga za svaku stranu.

div
širina: 300px;
visina: 300px;
padding-top: 25px;
donji dio: 35px;
padding-left: 5px;
padding-right: 10px;
obrub: 25px kruta tvar;

Što je marža?

U CSS (Cascading Style Sheets) margina je prostor izvan granice. Odvaja blok od ostalih blokova. Granica je također prozirna, ali velika razlika kod paddinga je u tome što rub ne uključuje slike pozadine ili pozadinske boje primijenjene na element. Iznos marže u CSS-u određuje se korištenjem izraza "marža". Sljedeći dio koda primijenio je marginu od 25 piksela oko bloka div.

div
širina: 320px;
visina: 320px;
obrub: kruta 5px;
marža: 25px;

Mogu se odrediti i različite vrijednosti za različite strane bloka. Sljedeći dio koda primjenjuje različite vrijednosti margine za svaku stranu.

div
širina: 320px;
visina: 320px;
obrub: kruta 5px;
margina-top: 25px;
marža-dno: 35px;
margina-lijevo: 5px;
margina-desno: 10px;

Koja je razlika između Margine i Paddinga?

• Padding je prostor između granice i sadržaja dok je margina prostor izvan granice.

• Padding odvaja sadržaj bloka od obruba. Margin odvaja jedan blok od drugog.

• Padding se sastoji od pozadinskih slika i boja pozadine primijenjenih na sadržaj dok margina ne sadrži takve.

• Rubovi susjednih blokova mogu se preklapati dok se padding ne preklapa.

Sažetak:

Padding vs Margin

Padding je prostor unutar granice bloka koji odvaja granicu od sadržaja. Granica je razmak izvan granice koji odvaja blok od susjednih blokova. Još jedna razlika je u tome što padding sadrži pozadinsku sliku i boje pozadine primijenjene oko sadržaja dok ih rub ne sadrži. Marže susjednih blokova mogu se ponekad preklapati kad preglednik pregledava stranicu, ali takvo se punjenje neće dogoditi..

Ljubaznošću slika:

1. CSS model kutije tvrtke Felix.leg (CC BY-SA 3.0)