NePo
Rugpjūtis 16, 2006

CSS: margin vs padding

Šį kartą nerašysiu didelių filosofijų, tai tik paprastas patarimas, paaiškinimas pradedantiesiems Web-dizaineriams.
Manęs vienas žmogus paklausė ką naudoti teksto atitraukimui margin ar padding, taigi nusprendžiau paaiškinti kas yra kas.

Norėdamas paaiškinti susikūriau patį paprasčiausią HTML puslapį (tikiuosi kodo pateikti nereikia?). Į <div> apvalkalą įvyniojau truputį teksto ir priskyriau jam sekantį stilių

border-color: #990000;
border-width: 2;
border-style: solid;

Šis kodas aprašo atitinkamai ribos/rėmelio spalvą, storį ir stilių. Jį priskyrę mes matome tokį vaizdą:
npcss1.jpg
Vaizdelis paprastas ir aiškus, dabar įdėsiu dar vieną eilutę:

margin: 10px;

ir štai ką mes matome:

O dabar vietoj jos įrašykim kitą eilutę:

padding: 10px;

ir žiūrim ką turim:
npcss3.jpg

Tiems, kurie nesuprato mano paveiksliukų pabandysiu suformuluoti žodžiais: margins atitraukia visą objektą nuo puslapio krašto ar nuo kito objekto, kitaip sakant nubrėžia asmeninės zonos ribas, tuo tarpu padding jau daro teksto atitraukimą savo kieme, nepriklausomai nuo kitų objektų, ar puslapio.
Ką mes galim nustatyti? Tiek padding, tiek margin turi analogiškas savybes, todėl pateiksiu pavyzdį tik su pirmuoju:

padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;

Šis kodas nurodo kiek reiktų skirti erdvės iš kiekvienos pusės. Tą patį mes galime aprašyti ir viena eilute:

padding: 10px 10px 10px 10px;

Jeigu rašote vienoje eilutėje tuomet tvarka būna tokia: viršus, dešinė, apačia, kairė.
Tačiau dažniausiai yra nurodomi tik du matavimai nuo viršaus/apačios ir nuo kairės/dešinės pusės, tuomet kodas būna toks:

padding: 10px 10px;

(Pastaba: kai visos keturios pusės vienodos, užtenka nurodyti vieną skaičių. Nors paveiksliukuose rodyklėmis parodytas atitraukimas tik nuo kairio krašto, tačiau iš tiesų tas atitraukimas daromis iš visų pusių).
Tiek šį kartą fokusų su CSS tikiuosi kam nors pravers.

Panašūs straipsniai


“CSS: margin vs padding” komentarų: 15

  1. mid

    o kas čia per browseris tavo screenshotuose?

  2. asterisk

    na lyg title matosi, jog tai Opera :P

  3. HEADSHOT

    Nepatinka man pavainime tas vs

  4. Rimantas

    Pridėsiu, kad galima nurodyti ir tris skaičius. Tada pirmasis nurodys reikšme viršui, antras - šonams, trečias - apačiai.

  5. petreliukis

    mid, i tavo klausima kaip ir neatsake :/
    Opera gi nera browseris

  6. Merė Raili

    O dabar pažiūrėk savo pavyzdį su IE bei FF ir pamąstyk apie gyvenimo prasmę :)

  7. Tomas

    “border-width: 2;” nėra nurodytas mato vienetas, todėl ir gyvenimo prasmė dingsta Merei Raili

  8. zxcv

    nepo o tu tikras kad tavo css yra vaidus?

  9. zxcv

    beto nepo labai neoptimaliai rasai css. kam margin-top… rasyti per keturias eilutes kai galima vienoje:
    margin: 10px 0px 0px 10px (top, right, bottom, left) jei sunku atsiiminti is musu puses nuo virsaus pagal laikrodzio rodykle:)

  10. Rimantas

    zxcv, taigi parašyta, kad galima trumpiau.
    Tavo pavyzdį geriausia užrašyt: margin: 10px 0;
    0 galima naudoti ir nenurodant vienetų, nes tas beprasmiška :)

  11. mczxcv

    a jo:) sori nedaskaiciau:) o mano pavizdys is lempos :D

  12. precise

    Na, pats maniakiškiausias optimizavimas turbūt būtų generuojant css su kokia nors PHP, css būtų generuojamas pagal puslapio pavadinimą ir visi nenaudojami elementai būtų nekraunami. :)

  13. ZaZa

    precise - jai pas tave yra geras web-serveris, ir pas vartotoja yra gerai sukonfiguruota narshykle, kuri ishnaudoja keshavima, CSS, kaip standartinis statinis failas, benarshanciam tavo puslapije, krausis tik viena karta - pirma karta jam apsilankius, sekanti karta, bus tik patikrinta, ar ji nera modifikuota (kaip tai vyksta - HTTP specifikacija).

    Straipsniuke truksta grishto ishvado - ka ir kada naudoti.

  14. precise

    Aišku, tuomet kiekvieną kartą modifikuojamas css tik padidintų duomenų srauto “valgymą”. ačiū.

  15. tureklai

    border-width?

    border: 2px solid red; ir viskas…

Rašyti komentarą

Jūs privalote prisijungti jeigu norite rašyti komentarą.