Korištenje Box Model u CSS-u- Struktura i pozicioniranje

U CSS-u Box Model je važan koncept za određivanje strukture i položaja elementa na web stranici. Sastoji se od temeljnih komponenti kao što su Sadržaj, Padding, Border i Margin.

 

Content

Content je područje koje sadrži stvarni sadržaj elementa, poput teksta, slika ili videozapisa.

Za definiranje veličine sadržaja koristimo svojstva width  i height.

 

Padding

Padding je prostor oko sadržaja, stvarajući jaz između sadržaja i elementa border.

Za navođenje padding vrijednosti koristimo svojstva padding-top, padding-right,padding-bottom i  . padding-left

 

Border

To Border je obris oko elementa koji stvara jasnu granicu između sadržaja i okolnog područja.

Za formatiranje border koristimo svojstva border-width, border-style i border-color  .

 

Margin

Margin je prostor izvan elementa border, stvarajući jaz između ostalih elemenata.

Za definiranje margin vrijednosti koristimo svojstva margin-top, margin-right, i. margin-bottom margin-left

 

Korištenjem Box Model in CSS-a možemo prilagoditi veličinu i položaj elementa mijenjanjem vrijednosti njegovih komponenti.

Primjer:

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

U gornjem primjeru, element s klasom .box ima širinu od 200px i visinu od 100px. Ima 20px padding, crni border debljine 1px i 10px margin.

 

Podešavanjem ovih vrijednosti možete stvoriti elemente različitih veličina i razmaka na svojoj web stranici. Korištenjem Box Model, imate kontrolu nad pozicioniranjem, veličinom i razmakom elemenata unutar vašeg sučelja.