Skirtumas tarp maržos ir kamšalo

„Margin vs Padding“
 

Svarbus aspektas yra skirtumas tarp paraštės ir kamšalo CSS kaip paraštė ir paminkštinimas yra dvi svarbios sąvokos, naudojamos CSS, kad būtų tarpai tarp skirtingų elementų. Kamšalas ir paraštės yra nekeičiami ir turi skirtingą paskirtį, todėl turi būti tinkamai naudojami. Padėklas yra tarpas tarp turinio ir bloko krašto. Kita vertus, paraštė yra erdvė už bloko sienos. Paraštis atskiria blokus nuo gretimų blokų, o apmušalai atskiria kraštą nuo turinio.

Kas yra Padding?

CSS (Kaskadinio stiliaus lakštai), paminkštinimas yra tarpas, esantis tarp turinio ir krašto. Tai atskiria bloko turinį nuo jo krašto. Pamušalas yra skaidrus ir apima ir fono paveikslėlį, arba elemento fono spalvą. Elemento padėklo dydis nurodomas CSS kode vartojant terminą „padding“. Pvz., Norėdami pridėti 25 taškų apimties turinį, naudokite šį kodą.

div
plotis: 300 taškų;
aukštis: 300 taškų;
paminkštinimas: 25px;
kraštinė: 25 taškų kietas;

Jei reikia, taip pat galima atskirai nurodyti skirtingas padėklo vertes kairėje, dešinėje, viršuje ir apačioje. Šiame kode nurodomos skirtingos padėklo vertės kiekvienai pusei.

div
plotis: 300 taškų;
aukštis: 300 taškų;
padding-top: 25px;
paminkštinimas-dugnas: 35px;
paminkštinimas kairėje: 5px;
paminkštinimas dešinėje: 10 taškų;
kraštinė: 25 taškų kietas;

Kas yra marža?

CSS (Cascading Style Sheets) pakraštis yra erdvė už sienos. Tai atskiria bloką nuo kitų blokų. Paraštė taip pat yra skaidri, tačiau didelis skirtumas su kamšalu yra tas, kad paraštėje nėra fono paveikslėlių ar elemento fono spalvų. Užstato dydis CSS yra nurodytas vartojant terminą „marža“. Šis kodo fragmentas pritaikė 25 taškų paraštę aplink div bloką.

div
plotis: 320 pikselių;
aukštis: 320 pikselių;
kraštinė: 5 taškų kietas;
paraštė: 25 taškai;

Taip pat skirtingoms bloko pusėms gali būti nurodytos skirtingos vertės. Šis kodo fragmentas kiekvienai pusei taiko skirtingas paraštės vertes.

div
plotis: 320 pikselių;
aukštis: 320 pikselių;
kraštinė: 5 taškų kietas;
„margin-top“: 25 taškai;
paraštės apačia: 35 taškai;
paraštė-kairė: 5 taškai;
dešinė paraštė: 10 taškų;

Kuo skiriasi „Margin“ ir „Padding“?

• „Padding“ yra tarpas tarp sienos ir turinio, o kraštas yra tarpas už sienos.

• Padingas atskiria bloko turinį nuo krašto. Paraštis atskiria vieną bloką nuo kito.

• Padėklas susideda iš fono vaizdų ir fono spalvų, taikomų turiniui, o paraštė neturi tokio turinio.

• Gretimų blokelių paraštės gali sutapti, o paminkštinimas nepersidengia.

Santrauka:

Padas su marža

„Padding“ yra erdvė bloko, esančio sienelės viduje nuo turinio, ribos. Paraštis yra tarpai už sienos, skiriantys bloką nuo gretimų blokų. Kitas skirtumas yra tas, kad užpildymas apima fono paveikslėlį ir fono spalvas, taikomas aplink turinį, o paraštėje jų nėra. Gretimų blokų paraštės kartais gali persidengti, kai naršyklė pateikia puslapį, tačiau to nepadarys.

Vaizdai maloniai:

1. CSS dėžės modelis, kurį pateikė Felix.leg (CC BY-SA 3.0)