TVORBA WEBU
CSS - ZÁKLADY
CSS - Stylovanie
- CSS Styling pozadia
- CSS Styling text
- CSS Styling fonty
- CSS Styling odkazy
- CSS Styling zoznamy
- CSS Styling tabuľky
CSS - BOX MODEL
CSS - PRÍKLADY
Učebnica CSS - Box model
CSS - Box model
| « Predchádzajúca | Ďalšia kapitola » |
CSS box model
Box model v CSS hovorí o tom, ako sú usporiadané jednotlivé atribúty width, height, padding, margin a border tak, aby spolu vytvorili objekt (viď obrázok). Týmito atribútami sú vymedzené obdĺžnikové oblasti stránky (každá oblasť je tzv. box), ktoré ohraničujú výsledný obsah objektu.
Obrázok nižšie ilustruje box model
Vysvetlenie rôznych častí:
Margin - Vymaže oblasť okolo hranice. Rozpätie nemá farbu pozadia to je úplne transparentné.
Border - hranica, ktorá vedie okolo okolia a obsahu. Hranica je ovplyvnená farbou pozadia okna.
Padding - vymaže okolie obsahu. Polstrovanie je ovplyvnená farba pozadia okna.
Content - obsah boxu, kde sa zobrazujú text a obrázky.
Aby bolo možné nastaviť šírku a výšku prvku správne vo všetkých prehliadačoch, potrebujete vedieť, ako funguje box model.
Šírka a výška prvku
Dôležité: Ak zadáte šírku a výšku vlastnosti prvku s CSS, ste práve nastavenia šírky a výšky oblasti obsahu. Ak chcete vedieť v plnej veľkosti prvku, musíte tiež pridať výplň, orámovanie a marže.
Celková šírka prvku v nižšie uvedenom príklade je 300px
| width:250px; padding:10px; border:5px solid gray; margin:10px; |
Poďme si to spočítať:
250px ( šírka )
20px ( ľavý a pravý padding )
10px ( ľavý a pravý okraj )
20px ( ľavý a pravý okraj )
= 300px
Predstavte si, že ste mali len 250px priestoru. Urobme prvok s celkovou šírkou 250px
Príklad
Vyskúšajte si to » |
Celková šírka prvku by sa mala vždy vypočítať takto:
Celkom prvok width = šírka + ľavý padding + pravý padding + ľavý okraj + pravý okraj + ľavý margin + pravý margin
Celková výška prvku by sa mala vždy vypočítať takto:
Celkom prvok height = výška hornej + dolnej výplne + horný okraj + spodný okraj + horný margin + dolný margin
Prehliadače a problém s kompatibilitou
Ak ste testovali predchádzajúci príklad v programe Internet Explorer, ste videli, že celková šírka nebola práve 250px.
IE obsahuje výplň a okraj v šírke, ak je šírka nastavená vlastnosť, ak nie je DOCTYPE deklarovaný.
Ak chcete tento problém vyriešiť, stačí pridať DOCTYPE do kódu:
Príklad
Vyskúšajte si to » |
| « Predchádzajúca | Ďalšia kapitola » |