Shrnutí

V 3. lekci CSS jsme se naučili jak funguje box model.

A dozvěděli jsme se, že:

• Obsah si můžeme představit jako obraz.
• Velikost obsahu nastavíme pomocí výšky (height) a šířky (width)
• Velikosti udáváme v pixelech (px)
• Rámeček (border) si můžeme představit jako rámeček obrazu.
• Rámeček vytváříme ve tvaru: border: šířka styl barva;
• Zaoblení rámečku (border-radius) udáváme v pixelech. Kde více pixelů znamená větší zaoblení.
• Polstrování (padding) si můžeme představit jako prostor mezi obsahem obrázku a jeho rámečkem.
• Polstrování můžeme vytvořit buď na všech stranách stejně velké padding: 10px nebo každé straně zvlášť:

padding-left: 10px;
padding-right: 5px;
padding-top: 0px;
padding-bottom: 15px;

• Okraj (margin) si můžeme představit jako prostor mezi rámečky vedlejších obrázků.
• Okraj podobně jako polstrování můžeme vytvořit na každé straně stejně velké margin: 10px nebo na každé straně zvlášť:

margin-left: 10px;
margin-right: 5px;
margin-top: 0px;
margin-bottom: 15px;

• Přetečení (overflow) nastává, když je prvek větší než jeho rodič.
• Přetečení můžeme řešit následujícími způsoby: schovat (hidden), přidat scroll (scroll) nebo zobrazit (visible), což je výchozí hodnota.