Použití Box Model v CSS- struktura a umístění

V CSS Box Model je důležitý koncept pro určení toho, jak je prvek strukturován a umístěn na webové stránce. Skládá se ze základních komponent, jako je obsah, Padding, Border a Margin.

 

Content

Content je oblast, která obsahuje skutečný obsah prvku, jako je text, obrázky nebo videa.

K definování velikosti obsahu používáme vlastnosti width  a height.

 

Padding

Padding je prostor kolem obsahu, který vytváří mezeru mezi obsahem a prvkem border.

Ke specifikaci padding hodnot používáme vlastnosti padding-top, padding-right,padding-bottom a  . padding-left

 

Border

Je Border obrys kolem prvku, který vytváří jasnou hranici mezi obsahem a okolní oblastí.

K formátování border používáme vlastnosti border-width, border-style, a border-color  .

 

Margin

Margin je prostor vně prvku border, vytvářející mezeru mezi ostatními prvky.

K definování margin hodnot používáme vlastnosti margin-top, margin-right, a. margin-bottom margin-left

 

S využitím Box Model in CSS můžeme přizpůsobit velikost a pozici prvku úpravou hodnot jeho komponent.

Příklad:

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

Ve výše uvedeném příkladu má prvek s třídou .box šířku 200px a výšku 100px. Má 20px padding, černou border o tloušťce 1px a 10px margin.

 

Úpravou těchto hodnot můžete na své webové stránce vytvářet prvky s různými velikostmi a mezerami. Prostřednictvím použití Box Model máte kontrolu nad umístěním, velikostí a rozestupy prvků ve vašem rozhraní.