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.

MARGIN

Sve što smo naveli za padding, važi i za prostor predstavljen na slici kao margin.

CSS-struktura-5

Sintaksna razlika je u tome što ćete svuda umesto reči padding pisati reč margin, sve ostalo ostaje isto.

Ako pogledamo primer iznad, sintaksno, to bi izgledalo ovako:

div{margin-top: 5px;}

div{margin-right: 8px;}

div{margin-bottom: 6px;}

div{margin-left: 4px;}

ili zbirno:

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

Ipak, postoje značajne razlike izmedju padding i margin. To su:

  • Padding NE može imati negativnu vrednost dok margin može.
  • Padding sadrži pozadinsku boju ili sliku elementa dok je margin transparentan
  • Margin udaljava element od drugih elemenata u dokumentu dok padding definiše udaljenost sadržaja od unutrašnje ivice elementa.

Pogledajmo primer

<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8″>

<title>Pozicioniranje elemenata kreiranjem DIV-ova</title>

<style>

img{padding:10px;margin:10px;border:5px solid red;background-color:yellow;}

div{margin:0px;padding:0px;border:1px solid black;width:151px;height:117px;}

</style>

</head>

<body>

<div>

<img src=”kafe1.jpg”>

</div>

</body>

</html>

CSS-struktura-6

BORDER

Jedino pravilo koje se zaista može videti je border i ono definiše ivice elementa. Takodje se može podesiti po pojedinačnoj strani (gore, dole, levo i desno) ili zbirno. Na primer,

div{border-top: 2px solid black;}

div{border-right: 2px solid black;}

div{border-bottom: 2px solid black;}

div{border-left: 2px solid black;}

ili zbirno:

div{border: 2px solid black;}

govori pretraživaču da ovo pravilo primeni na sve div elemente i to tako da sve ivice oboji u crno punom linijom u debljini od 2px.

Postoji još jedno pravilo pod imenom outline, ali zbog sličnosti sa border pravilom, malo se koristi i najbolje ga je podesiti na outline:none; naročito na tagovima <img> kako ne bi pravilo probleme. Inače, na slikama se u nekim pretraživačima pojavljuje plavi okvir ukoliko se ne definiše pravilo img{outline:none;}

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