HTML

Web o webu

Bloky

Umístění bloků

blok 1
blok 2
blok 3
margin 0% auto

float left right
none

Barvy a rámečky - bloky jako bannery

blok 1
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 2
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 3
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
float none left
padding
box-sizing content-box border-box
margin 0% 2%
border
border-radius
box-shadow
background-color

Barvy a rámečky - bloky jako sloupce

blok 1
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 2
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 3
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
margin 0%
float left
box-sizing border-box
padding
background-color
border-right

Rámeček posledního bloku

div:last-child

border-right none

Barva prostředního bloku

div:nth-child(2)

background-color

Rozměry v px

Nastavte rozměry tak, aby bloky přesně vyplnily prostor v rámečku (vyzkoušejte i po přepnutí box-sizing):

celková šířka 380 px

blok 1
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 2
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 3
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
width
padding
border-width
margin

box-sizing content-box border-box

Rozměry v %

Zvolte takovou kombinaci hodnot, aby bloky přesně vyplnily prostor v rámečku (vyzkoušejte i po přepnutí box-sizing):

blok 1
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
blok 2
x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x
width 40% 44%
46% 50%
padding 0% 1%
2% 5%
10px 20px
border-width 0px 1px
1% - nelze!
margin 0% 1%
2% 5px

box-sizing content-box border-box