• Box model
    •
  • Position
    •
  • Display
    •
  • Pseudo
    •

    Box Model

    Box model je základním konceptem v CSS, který definuje, jak jsou prvky zobrazeny a jak jsou velké.
    Každý HTML prvek je obklopen “krabicí”, která se skládá z několika částí:
    1. Obsah (content): Tato část obsahuje text, obrázky nebo jiný obsah elementu.
    2. Padding (padding): Ohraničuje oblast kolem obsahu. Je to průhledná mezera mezi obsahem a okrajem.
    3. Okraj (border): Obklopuje padding a obsah. Může být nastaven na různé styly a tloušťky.
    4. Okrajová mezera (margin): Je průhledný prostor kolem okraje. Určuje vzdálenost mezi tímto elementem a ostatními prvky na stránce.

    Výhody

    Jednoduchost: Umožňuje snadno přidávat okraje, padding a rámečky kolem prvků.
    Kontrola layoutu: Pomáhá definovat prostor mezi prvky na stránce.
    Výpočet celkové šířky, výšky prvku
    Šířka = obsah + padding + border
    Výška = obsah + padding + border
    Celková šířka tohoto div prvku je :
    350px (320px obsah + 20px padding + 10px okraj)
    A výška je :
    80px (50px obsah + 20px padding + 10px okraj).
    Příklad
    CSS
    
div{
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}