CSS Boxovací model - Boxing model - AKO NA WEB

CSS Boxovací model - Boxing model

Už podľa názvu boxovací model je zrejmé, že sa vytvárajú boxy, ktoré majú určité rozmery, orámovanie a spacing (medzery alebo vonkajšie a vnútorné okraje).

Tu je použitie v JSFiddle.net:
..:: otvoriť ::..

Príklad:

<div style="width: 300px; height: 100px; padding: 50px; background-color: red;">
  <div style="width: 200px; height: 50px; border: 1px solid #000; padding: 25px; background-color: orange;">
    Text
   </div>
</div>


Najlepšie je to demonštrovať na obrázku - vidíš 2 boxy. červený a oranžový s textom.

Boxing Model v CSS

Vzhľadom na oranždový box si predstav vlastnosti padding a margin tak, ako ich vidíš na tomto obrázku:

Boxovací model - border, margin, padding, width a heightP.S.: ak si si všimol, že margin som nepoužil v príklade hore, tak to preto, lebo by sa mi aplikoval aj na vonkajší <div>. Pri absolútnom pozíciovaní má význam. V tomto konkrétnom príklade som použil vnútorné okraje na oboch boxoch čo vizálne zavádza, že oranžový box má aj padding aj margin. Pozri kód a vyskúšaj si ho. Otestuj aj margin.

Do celkovej šírky (width) a výšky (height) boxu sa zahrňuje aj čiara (border), vonkájší okraj (margin), vnútorný okraj od border až po text (padding).


Vlastnosť z-index ti umožní číslovkou dostať do popredia alebo do pozadia daný box.

Príklad:
z-index: -1;
z-index: 3500;