Document

O co se jedná?

Box model je způsob, jakým jsou na webové stránce vizuálně zobrazeny jednotlivé elementy. Každý HTML element je reprezentován jako obdélníkový box, který může mít definované rozměry, okraje, padding a margin.

Box model se skládá ze čtyř hlavních částí:

Obsah (Content): Toto je oblast, kde se zobrazuje text a obrázky.
Padding: Padding je průhledná oblast kolem obsahu, která vytváří mezeru mezi obsahem a okrajem.
Okraj (Border): Okraj obklopuje padding a obsah. Může mít různou tloušťku a styl.
Margin: Margin je průhledná oblast vně okraje. Určuje vzdálenost mezi jednotlivými elementy.

Příklad

          div {
                width: 320px;
                height: 50px;
                padding: 10px;
                border: 5px solid gray;
                margin: 0; 
            }

Výsledek:

content