Razlika med maržo in oblazinjenjem

Margin proti Paddingu
 

Razlika med maržo in oblazinjenjem je pomemben vidik pri CSS kot marža in oblazinjenje sta dva pomembna koncepta, ki se v CSS uporabljata za razmik med različnimi elementi. Oblazinjenja in robniki niso zamenljivi in ​​imajo različne namene, zato jih je treba ustrezno uporabiti. Obloga je prostor med vsebino in obrobo bloka. Na drugi strani je rob zunaj meje bloka. Obrobje loči bloke od sosednjih blokov, oblazinjenje pa loči mejo od vsebine.

Kaj je oblazinjenje?

V CSS (Kaskadne tablice sloga), oblazinjenje je prostor med vsebino in obrobo. Vsebino bloka loči od njegovega roba. Oblazinjenje je pregledno in vključuje tudi ozadje slike ali barvo ozadja elementa. Količina oblazinjenja elementa je določena z uporabo izraza "padding" v kodi CSS. Če želite na primer dodati 25px oblazinjenje okoli vsebine, lahko uporabite naslednjo kodo.

div
širina: 300px;
višina: 300px;
oblazinjenje: 25px;
rob: 25px trdno;

Po potrebi lahko različne vrednosti oblazinjenja ločeno določite tudi za levo, desno, zgornjo in spodnjo stran. Naslednji del kode določa različne vrednosti oblazinjenja za vsako stran.

div
širina: 300px;
višina: 300px;
oblazinjeni vrh: 25px;
oblazinjeno dno: 35px;
oblazinjenje-levo: 5px;
oblazinjenje-desno: 10px;
rob: 25px trdno;

Kaj je marža?

V CSS (Cascading Style Sheets) je rob zunaj meje. Blok loči od drugih blokov. Rob je tudi pregleden, velika razlika pri oblazinjenju pa je, da rob ne vključuje slik ozadja ali barv ozadja, nanesenih na element. Znesek marže v CSS je določen s pomočjo izraza „marža“. Naslednji del kode je uporabil rob 25px okoli bloka div.

div
širina: 320px;
višina: 320px;
obroba: 5px trdna;
marža: 25px;

Za različne strani bloka se lahko določijo tudi različne vrednosti. Naslednji del kode uporablja različne vrednosti marže za vsako stran.

div
širina: 320px;
višina: 320px;
obroba: 5px trdna;
zgornja meja: 25px;
zgornja meja: 35 pik;
rob-levo: 5px;
meja-desno: 10px;

Kakšna je razlika med Margin in Padding?

• Oblazinjenje je prostor med obrobo in vsebino, medtem ko je rob zunaj meje.

• Oblazinjenje loči vsebino bloka od meje. Obrobje loči en blok od drugega.

• Oblazinjenje je sestavljeno iz slik ozadja in barv ozadja, ki se nanašajo na vsebino, medtem ko rob ne vsebuje takega.

• Robovi sosednjih blokov se lahko prekrivajo, oblazinjenje pa se ne prekriva.

Povzetek:

Padding proti Margin

Oblazinjenje je prostor znotraj meje bloka, ki mejo loči od vsebine. Obrobje je razmik zunaj meje, ki loči blok od sosednjih blokov. Druga razlika je v tem, da oblazinjenje vključuje sliko ozadja in barve ozadja, nanesene okoli vsebine, medtem ko jih rob ne vsebuje. Robovi sosednjih blokov se lahko včasih prekrivajo, ko brskalnik obnovi stran, vendar se takšno dogajanje ne bo zgodilo.

Vljudnost slik:

1. CSS model škatle Felix.leg (CC BY-SA 3.0)