Okraje, rámečky, plovoucí okna

Margin - vnější okraje

Zadávají se pomocí procent nebo délek.

Příklad

Dlouhý zápis

 pre.vnejsiokraj{
  margin-top:     5px;  /*horní vnější okraj  */
  margin-bottom:  5px;  /*spodní vnější okraj */
  margin-left:    5px;  /*levý vnější okraj   */
  margin-right:   5px;  /*pravý vnější okraj  */
 }

Zkrácený zápis

 pre.vnejsiokraj{
  margin : 5px 5px 5px 5px; /*horní, pravý, spodní, levý okraj*/
 }

Nejkratší zápis

Jen jsou-li všechny okraje stejné, tento zápis totiž platí pro všechny okraje.

 pre.vnejsiokraj{
  margin : 5px; 
 }

margin-top - horní vnější okraj
margin-bottom - dolní vnější okraj
margin-left - levý vnější okraj
margin-right - pravý vnější okraj
margin - nastavení všech vnějších okrajů

Padding - vnitřní okraje

Zadávají se pomocí procent a délek.

Příklad

Dlouhý zápis

 pre.vnitrniokraj{
  padding-top:      5px;
  padding-bottom:   5px;
  padding-left:     5px;
  padding-right:    5px;
 }

Zkrácený zápis

 pre.vnitrniokraj{
  padding : 5px 5px 5px 5px; /*horní, pravý, spodní, levý okraj*/
 }

Nejkratší zápis

Jen jsou-li všechny okraje stejné, tento zápis totiž platí pro všechny okraje.

 pre.vnitrniokraj{
  padding : 5px; 
 }

padding-top - horní vnitřní okraj
padding-bottom - dolní vnitřní okraj
padding-left - levý vnitřní okraj
padding-right - pravý vnitřní okraj
padding - nastavení všech vnitřních okrajů

Width - šířka elementu

Zadává se pomocí procent a délek.

Příklad

 pre.sirka{
  width: 450px;
 }

Height - výška elementu

Zadává se pomocí procent a délek.

Příklad

 pre.vyska{
  height: 450px;
 }

Border - rámeček

Lze nastavit - barva, styl, šířku a část, která se zobrazí.

Nastavení hran rámečku:

border-top - horní hrana rámečku
border-right - pravá hrana rámečku
border-left - levá hrana rámečku
border-bottom - spodní hrana rámečku
border - kompletní rámeček

Nastavení dalších vlastností:

border-top-color - nastavní barvy horní hrany rámečku
border-top-style - nastavení stylu horní hrany rámečku
border-top-width - nastavení šířky horní hrany rámečku

Všechny výše uvedné parametry lze použít i pro zbylé hrany rámečku(např. border-bottom-color).

Atributy:

Atribut	Hodnota
border-top-style border-right-style border-left-style border-bottom-style border-style	none, dotted, dashed, solid, double, groove, ridge, inset, outset

Float - plovoucí okno

Hodnoty vlastnosti float:

none - neplave
left - zarovnání vlevo a obtékání textem z druhé strany
right - zarovnání vpravo a obtékání textem z druhé strany
intherit - hodnota se zdědí po rodičovském prvku

Příklad

Okno zarovnané vpravo a obtékané textem z leva

 okno.vpravo{
  float : right;
 }

Clear - plovoucí okno

Určuje, jak a kde se zobrazí okno.
Hodnoty:

left - prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:left.
right - prvek se zobrazí až pod plovoucím prvkem s nastavenou vlastností float:right.
both - prvek se zobrazí až pod všemi plovoucími prvky.
none - prvek se zobrazí normálně.
intherit - nastavení je zděděno od rodičovského prvku

Příklad

Div s třídou naspodu, bude pod všemi plovoucími prvky

 div.naspodu{
  clear : both;
 }