Neretai žmonėms, neseniai susipažinusiems su pakopiniais stiliais (Cascading Style Sheets — CSS), iškyla klausimas, kuo skiriasi dvi CSS savybės: margin ir padding? Nors kai kuriais atvejais pritaikius vieną ar kitą savybę matomas rezultatas atrodo taip pat, iš tikrųjų jų paskirtys yra skirtingos. Todėl neapsigauokite manydami, kad galite naudoti vieną ar kitą savybę priklausomai nuo jūsų nuotaikos!

Pradžiai noriu parodyti, kokiais atvejais abi savybės, iš pirmo žvilgsnio, atlieka tą pačią funkciją. Tarkime, kad HTML dokumente turime h1 elementą ir po juo — šiek tiek teksto.

<h1>Naujienos antraštė</h1>
Mano naujienos turinys.

Toliau nurodykime CSS aprašą h1 identifikatoriui.

h1 { margin-bottom: 50px; }

Dabar atsidarykime HTML dokumentą savo naršyklėje. Pamatysite, kad tekstas, esantis po h1 elementu yra gerokai atitrauktas į apačią. Plačiau nieko neaiškinęs šiek tiek pakeisiu CSS aprašą.

h1 { padding-bottom: 50px; }

Kaip matote, dabar vietoj margin-bottom nurodžiau padding-bottom. Atsidarę HTML dokumentą savo naršyklėje turėtumėte pamatyti, kad rezultatas toks pat — tekstas, esantis po h1 elementu yra atitrauktas nuo viršaus.

Taigi iškyla elementarus klausimas — kam reikalingos dvi savybės, atliekančios tą pačią funkciją? Palaukite! Skirtumą vizualiai pamatysite, kai pridėsime h1 elementui rėmelį (tiksliau tik apatinę rėmelio kraštinę).

h1 { padding-bottom: 50px; border-bottom: 5px solid #DDD; }

Savo naršyklėje peržiūrėkite, kaip atrodo jūsų rezultatas. Įsidemėkite rėmelio santykį su h1 elementu ir po juo esančiu tekstu. Tada vėl pakeiskite iš padding-bottom į margin-bottom.

h1 { margin-bottom: 50px; border-bottom: 5px solid #DDD; }

Aha! Dabar rėmelis nuo antraštės elemento (h1) nebėra atitrauktas, tačiau tekstas, esantis po elementu, išliko savo pozicijoje. Ar jau pradedate suprasti, kuo skiriasi padding nuo margin? Dar ne? Gerai, tada panagrinėkime žemiau pateiktą paveiksliuką su brėžiniu.

Sunumeravau brėžinyje pavaizduotas keturias sritis:

1 — bloko margin sritis. Realioje situacijoje niekados tiesiogiai neišvysite šios srities, kadangi ji yra nematoma. Tiek margin, tiek padding galima pamatyti tik iš elementų išsidėstymo, pavyzdžiui, dviejų blokų, kurių fono spalva juoda. Pačio margin (ar padding) nematysime, tačiau atkreipsime dėmesį į tai, jog du elementai yra atitolę vienas nuo kito kažkokiu atstumu. Taigi tas atstumas ir bus margin.

2 — bloko rėmelis (parodytas tik tam, kad būtų lengviau pamatyti bloko ribas).

3 — padding sritis. Šios srities taip pat tiesiogiai nepamatysite, o tuo labiau negalėsime nurodyti jos spalvos ar kitų CSS savybių. Tai tiesiog neįmanoma!

4 — turinio sritis. Turinys atitraukiamas nuo bloko kraštų tiek, kiek nurodėme bloko elementui padding.

Taigi, trumpai tariant, margin savybė nurodo, kiek elementas turi būti atitraukiamas nuo kitų elementų (arba puslapio kraštų), o padding savybė — kiek turi būti atitrauktas turinys, esantis tame elemente.

Margin ir padding savybių nurodymas

Tiek margin, tiek padding savybei galima nurodyti keturias reikšmes, t. y. kiekvienai kraštinei.

identifikatorius 
{  
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
}

identifikatorius 
{  
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

Arba paprastesnis variantas — nurodyti visų kraštinių atitraukimo reikšmes vienoje eilutėje.

identifikatorius 
{  
	margin: 10px 10px 10px 10px;
}

identifikatorius 
{  
	padding: 10px 10px 10px 10px;
}

Reikšmės nurodomos kiekvienos kraštinei pagal laikrodžio rodyklę, tad primoji reikšmė — atitraukimas nuo viršaus, antroji — nuo dešinės, trečia — nuo apačios ir ketvirtoji — nuo kairiosios pusės. Tarkime, kad norime nurodyti atitraukimą tik nuo viršaus ir apačios.

identifikatorius 
{  
	margin: 10px 0;
}

identifikatorius 
{  
	padding: 10px 0;
}

Šiuo atveju pirmoji reikšmė nurodo, kad atitraukimas bus pritaikytas 10px nuo viršaus ir apačios, o nuo šonų 0.

identifikatorius 
{  
	margin: 10px;
}

identifikatorius 
{  
	padding: 10px;
}

Pagal aukščiau pateiktus pavyzdžius, atitraukimas bus pritaikytas nuo visų kraštų po 10px. Taigi žemiau pateikti du variantai veikimo atžvilgiu bus visiškai vienodi.

identifikatorius 
{  
	margin: 10px 10px 10px 10px;
}

identifikatorius 
{  
	margin: 10px;
}

Atitraukimą galima nurodyti dviejais matavimo vienetais: pikseliais (taškais, angl. pixels — px) arba procentais (%). Beje, tiek margin, tiek padding savybei galima nurodyti reikšmes abiejais vienetais.

identifikatorius 
{  
	padding: 10px 5%;
}

Apibendrinimas

Margin ir padding savybės pakopiniuose stiliuose yra labai svarbios, kadangi jomis galime keisti tam tikrų blokų pozicijas, gražiai išdėlioti HTML elementus ir sukoduoti tvarkingą dizainą. Nepamirškite, kad šios dvi savybės skirasi ir naudokite jas atitinkamai. Tikiuosi, kad įsidemėjote margin ir padding savybių prasmę ir ateityje jums nebekils dvejonių, kokiais atvejais naudoti vieną ar kitą savybę.