Širina i visina CSS BOX elementa

Ovde nema neke velike filozofije. Evo daću odma primer i onda ću ga prokomenterisati.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html><head> <style type="text/css"> #wr {border: 1px solid gray;} #wc {width: 200px; height: 100px; border: 5px solid gray;} #wo {width: 300px; padding: 20px; border: 5px solid gray;} #we {width: 200px; height: 100px; border: 5px solid gray; margin: 30px;} </style></head><body> <p id=wr>Baš volim boks model</p> <p id=wc>Baš volim boks model</p> <p id=wo>Baš volim boks model</p> <p id=we>Baš volim boks model</p> </body></html>

Baš volim boks model

Prvi pasus je običan pasus koji se sreće u čistom HTML - u, stim što sam mu samo dodao vrednost za border i za boju linije solid gray kako bi videli granice pasusa, odnosno tog box elementa. U drugom pasusu smo dodali još i širinu width od 200 piksela, visinu height od 100 piksela, i liniju granice smo malo podebljaji tako što smo stavili border 5 piksela. Znači u tom drugom pasusu vidimo kako smo definisali širinu i povećali visinu. U trećem pasusu smo umesto height stavili padding koji definiše u svim pravcima rastojanje izmedju sadržaja i linije granice, te imamo da je tekst od granica boxa udaljen podjednako od 20px u svim pravcima. Četvrti pasus je isti kao i drugi samo mu je dodat atribut margin od 30 piksela, što prouzrokuje da se u svim pravcima oko granice elementa napravi prazan prostor od 30 piksela.

Ovde smo demonstrirali upotrebu atributa width i height a ostale atribute smo ovde koristili samo da bi se lepše uočile stvari vezane za širinu i visinu. O tim drugim atributima sledi u nastavku mnogo više.