CSS Osnove

BOX model

BOX model opisuje strukturu u kojoj je svaki HTML element okružen pravougaonikom i može imati svoje dimenzije. Dva osnovna CSS pravila koja definišu taj pravougaonik su HEIGHT i WIDTH. U sklopu tog zamišljenog pravougaonika postoje još tri atributa koja treba uzeti u obzir pri definisanju ukupnih dimenzija elementa: PADDING, MARGIN i BORDER. Ispod je grafički prikaz BOX modela.

 

Ako bolje pogledate, ovi elementi se protežu radijalno od centralnog dela koji ustvari predstavlja sam sadrzaj elementa (tekst, sliku i tome slicno) CONTENT. Sledeći prsten predstavlja pravilo padding, iza kojeg sledi border i na kraju margin pravilo.

Treba znati da su sva tri elementa opciona, tj. može se definisati vrednost nula za sva tri. U tom slučaju visina i širina elementa (definisana pravilima height i width) jednake su visini i širini samog sadržaja (content box).

PADDING

Prvo ćemo objasniti pravilo padding. Padding definiše rastojanje od ivice content-a do unutrašnje ivice border-a i izražava se u jedinicama dozvoljenim u HTML-u (px, pt, %, em, rem, in, cm) .

CSS-struktura-4

Mi ćemo se ovde ograničiti na px (piksel) a kasnije obraditi ostale. Padding može imati 4 različite vrednosti, za četiri stranice box-a: gornju, donju, levu i desnu.

Sintaksa je ispod:

div {padding: 2px 5px 8px 3px;}

Važno je znati da se ove četiri vrednosti odnose na četiri strane u redosledu kazaljke na satu, počevši od gornje vrednosti. Znači, u ovom konkretnom slučaju, prva vrednost je za gornji padding i iznosi 2px. Sledeća je desni od 5px, nakon nje donji od 8px i poslednji levi od 3px. Ovo se zove zbirni izraz za padding. Postoje i skraćene verzije ovog zapisa, na primer:

div {padding: 2px 8px 3px;}

gde 2px predstavlja gornji padding, 8px je vrednost za levi i desni padding, a 3px je donji padding.

Jos kraći izraz podrazumeva da su vrednosti za levu i desnu stranu iste (pa se zapisuju kao jedna) kao i vrednosti za gornju i donju (koje se takodje zapisuju kao jedna).

Taj slučaj izgleda:

div {padding: 2px 3px;}

i on znači da su gornja i donja vrednost – 2px, a leva i desna – 3px.

Najkraći oblik podrazumeva da su sve četiri vrednosti jednake i piše se kao

div {padding: 2px;}

i označava da su vrednosti za sve četiri strane iste: 2px.

Pojedinačne padding vrednosti

U slučaju da vam je potrebno da definišete posebno svaku od strana, koristićete četiri nezavisna pravila :

div{padding-top: 5px;}

div{padding-right: 8px;}

div{padding-bottom: 6px;}

div{padding-left: 4px;}

što je identično prethodno objašnjenom izrazu:

div{padding:5px 8px 6px 4px;}

Logički zaključujete da pojedinačne izraze koristimo samo kada definišemo jednu od strana a da u slučaju definisanja sve četiri koristimo skraćeno pravilo.

Preporučite ovaj članak:
Email this to someoneShare on Google+Share on FacebookShare on LinkedIn