BOX model

Svaki HTML element  se može predstaviti nevidljivim pravougaonikom. Razlikujemo sledeće elemente:

Boxmodelmargin – margina  prostor od ivice elementa do okolnih elemenata,

border – okvir elementa linija koja okružuje element,

padding -prostor između okvira i sadržaja tog elementa.

Atributi width i height označavaju širinu i visinu sadržaja elementa.

MARGINE

Margine nemaju pozadinske boje, tj. potpuno su bezbojne. Dimenzije margina se mogu zadati na nekoliko načina:

margin:10px   –  (odnosi se na sve četiri margine)

margin:10px 15px    – (kada iza margine stoje dve dimenzije, prva označava gornju i donju, a druga levu i desnu)

margin:10px 5px 15px 20px – (kada su sve margine različite, redosled:  gore, desno, dole, levo)

Postoji i mogućnost da se svakoj margini  zada dimenzija:

margin-right:5px;

margin-top:10px;

margin-left:20px;

margin-bottom:15px

OKVIR

Može se podesiti stil(border-style), boju(border-color) i debljinu(border-width) okvira.

border-style može imati sledeće vrednosti: none (bez okvira), solid (linija), double (dvije linije), dashed (isprekidane linijice), dotted (tačkice) i 3d efekti groove, ridge, inset i outset. Npr. border-style:dotted;

border-color se definiše preko RGB zapisa, heksadecimalnog zapisa ili naziva boje. Može biti i providan: border-color:transparent

Napomena : Ako element sadrži samo atribut border-color, tada se ta boja neće prikazati, jer je neophodno da prethodno bude definisan stil okvira.

border-width – (debljina okvira) se izražava u pikselima ili korišćenjem već definisanih debljina thin (tanko), medium (srednje) i thick (debelo). Isto kao i kod definisanja boje, i pre definisanja debljine neophodno je definisati stil okvira. Npr. border-width:5px;

Okvir se može zadati i koristeći ključnu reč border i nakon nje nabrojati tačnim redosledom debljinu, stil i boju.

Npr. border: thick dashed #ff55aa;

Okvire možemo definisati i pojedinačno gornji, desni, donji i levi (border-top, border-right, border-bottom, border-left, border-top-style, border-top-color, border-top-width, … )

Ukoliko želimo da okvir ima zaobljene ivice onda zadajemo radijus u pikselima. Radius 20px će predstavljati deo kružnice poluprečnika 20px.

PADDING

Padding označava prazan prostor između ivice elementa i sadržaja. Boja/pozadina ovog prostora je  definisana bojom/pozadinom samog elementa.

Gornji, desni, donji i levi padding se opisuju  kao kod margina.