IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

Š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

Baš volim boks model

Baš volim boks model

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.

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display