Visina i širina HTML elemenata

Visina i širina elemenata – HEIGHT & WIDTH

CSS-struktura-7

Sada, kada smo pojasnili pojedinačne parametre HTML elemenata, možemo da pogledamo kako se sračunava širina i visina elementa, tj. kako je treba definisati. Pogledaćemo kako se sračunava pravilo za visinu elementa idući odozgo na dole.

HEIGHT = margin-top + border-top +padding-top + content +padding-bottom + border-bottom + margin-bottom

Kao što vidimo, visina elementa nije samo visina sadržaja (slike ili teksta) već se na nju dodaju i vrednosti odgovarajućih margina, paddinga i bordera.

Visina elementa jednaka je ukupnoj visini sadržaja samo u slučaju da deklarišemo sve ostale vrednosti na nula. To bi učinili ovako:

img{margin:0px;padding:0px;border:0px;outline:none;}

Možda ovde imamo idealan primer korišćenja simbola * (za sve elemente)

Treba biti veoma oprezan jer neki elementi, tipa div, span, p, itd. imaju podrazumevane vrednosti za neka od pomenutih pravila.

Dodatno, različiti pretraživači imaju definisane različite vrednosti za padding, margin ili border pa uvek treba eksplicitno definisati njihove vrednosti.

Na primer, ako želimo da neka slika dimenzija 200px širine i 300px visine , koja se nalazi u okviru nekog div elementa

<div>

<img src=”slika1.jpg”>

</div>

zaista zauzme taj prostor (uključujući i div u okviru koga se nalazi), onda pravila za div i img izgledaju ovako:

div, img {margin:0; padding:0; border:none; outline:none;}

Ako prethodni izraz napišemo kao:

*{margin:0px;padding:0px;border:0px;outline:none;}

na neki način ćemo resetovati vrednosti i onda, u skladu sa potrebom, na pojedinim elementima, dodeljivati vrednosti za ove parametre po potrebi. Ovo će svakako prepisati ove nulte vrednosti jer selektor * ima najmanji prioritet.

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