Dimenzije CSS elementa

Dimenzije bloka u kome se nalazi sadržaj zadaju se atributima width i height. Osim zadavanja konkretne širine i visine, moguće je i zadati ograničenja za najmanju i najveću širinu, odnosno visinu.

Širina i visina elementa se odnose samo na sadržaj

Ako se širina i/ili visina ne zadaju, blok će se po širini razvući koliko može, dok će visina zavisiti od sadržaja.

width širina
height visina
min-width najmanja dozvoljena širina
min-height najmanja dozvoljena visina
max-width najveća dozvoljena širina
max-height najveća dozvoljena visina

width
height

Ako gledamo prema standardu, širina i visina se odnose na sadržaj, tj. deo u kome se nalazi tekst. Ovo ponašanje se može promeniti definisanjem drugačijeg box modela. Ovo je u stvari jako važno - kada definišemo širinu i visinu, one predstavljaju samo deo ukupnih dimenzija elementa na ekranu! To znači da će prostor koji elemenat zauzima na stranici zavisiti i od unutrašnje margine (padding) i debljine linije okvira (border).

Koliki prostor će lement zaista zauzimati na stranici zavisi i od paddinga, bordera i margina

Dimenzije dela bloka u kome se nalazi sadržaj zadaju se atributima width i height. Vrednosti ovih atributa su metričke ili procentualne.

Još jedna važna stvar - ako ograničimo i širinu i visinu bloka, a sadržaj je veći od njegovih dimenzija (npr. ako ima previše teksta), blok ostaje u zadatim dimenzijama, ali sadržaj "ispada". Ovo se rešava upotrebom atributa overflow.

Primer

U sledećem primerima možete videti kako se tipično mogu zadavati ovi atributi. Poigrajte se malo sa primerom, kako biste bolje razumeli zadavanje dimenzija bloka.


  /* Širina bloka je 400px, a visina 300px  */
  width: 400px;
  height: 300px;
  
css-box-dims-sr

min-width
min-height
max-width
max-height

Osim dva osnovna atributa za postavljanje konkretnih dimenzija, postoje i atributi koji služe za ograničavanje širine i visine. Ove atribute koristimo ukoliko želimo da omogućimo da se širina i visina menjaju, ali samo donekle.

min-width: [metrika] | [procenat] | auto | inherit min-height: [metrika] | [procenat] | auto | inherit max-width: [metrika] | [procenat] | none | inherit max-height: [metrika] | [procenat] | none | inherit

Primer

Evo primera u kome ima smisla da se zadaju ograničenja, s obzirom da je širina postavljena kao realtivna vrednost (50%) što je drugačije na različitim ekranima.


  /* Širina je relativna, ali smo je ograničili da bude od 200 do 800px */
  width: 50%;
  min-width: 200px;
  max-width: 800px;

U primeru možete eksperimentisati sa dimenzijama elemenata.

css-box-dims2-sr
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies). Detaljnije o tome možete pročitati u tekstu o našoj politici privatnosti.