Uporaba Box Model v CSS- Struktura in pozicioniranje

V CSS Box Model je pomemben koncept za določanje, kako je element strukturiran in pozicioniran na spletni strani. Sestavljen je iz temeljnih komponent, kot so vsebina Padding, Border in Margin.

 

Content

Content je območje, ki vsebuje dejansko vsebino elementa, kot so besedilo, slike ali videoposnetki.

Za določitev velikosti vsebine uporabljamo lastnosti width  in height.

 

Padding

Padding je prostor okoli vsebine, ki ustvarja vrzel med vsebino in elementom border.

Za podajanje padding vrednosti uporabljamo lastnosti padding-top, padding-right,padding-bottom in  . padding-left

 

Border

Je Border obris okoli elementa, ki ustvarja jasno mejo med vsebino in okolico.

Za formatiranje border uporabimo lastnosti border-width, border-style in border-color  .

 

Margin

Margin je prostor zunaj elementa border, ki ustvarja vrzel med drugimi elementi.

Za definiranje vrednosti margin uporabljamo lastnosti margin-top, in. margin-right margin-bottom margin-left

 

Z uporabo Box Model v CSS lahko prilagodimo velikost in položaj elementa tako, da spremenimo vrednosti njegovih komponent.

primer:

.box {  
  width: 200px;  
  height: 100px;  
  padding: 20px;
  border: 1px solid black;
  margin: 10px;  
}  

V zgornjem primeru ima element z razredom .box širino 200 slikovnih pik in višino 100 slikovnih pik. Ima 20px padding, črno border z debelino 1px in 10px margin.

 

S prilagajanjem teh vrednosti lahko na svoji spletni strani ustvarite elemente različnih velikosti in razmikov. Z uporabo Box Model, imate nadzor nad položajem, velikostjo in razmikom elementov znotraj vašega vmesnika.