Chování blokových prvků v rámci HTML dokumentu

Prezentace na téma: "Chování blokových prvků v rámci HTML dokumentu"— Transkript prezentace:

1 Chování blokových prvků v rámci HTML dokumentu
Blokové prvky Chování blokových prvků v rámci HTML dokumentu Ivo Peterka, FHS UK 2009

2 Rozměry blokového prvku
margin width Vnitřní obsah prvku border-width padding Ivo Peterka, FHS UK 2009

3 Rozměry blokových prvků
Okrajové rozměry lze nastavit i jednotlivě border-top-width, border-bottom-width, border- left-width, border-right-width margin-top, margin-right, margin-bottom, margin- left padding-top, padding-bottom, padding-left, padding-right Ivo Peterka, FHS UK 2009

4 Plovoucí prvky Prvek se stává plovoucím nastavením vlastnosti float
Hodnoty left, right left je vlastnost, kdy se plovoucí prvek umisťuje co nejvíce doleva v rámci vnitřního obsahu nadřazeného prvku right je vlastnost, kdy se plovoucí prvek umisťuje co nejvíce doprava v rámci vnitřního obsahu nadřazeného prvku Prvky jsou umístěny vedle sebe, pakliže součty šířek, padding (left i right), šířek okrajů (left i right) a margin (left i right) jsou menší než šířka nadřazeného prvku. Ivo Peterka, FHS UK 2009

5 Samostatné plovoucí prvky
Chceme-li samostatný plovoucí prvek (bez „sousedů“), použijeme vlastnost clear. clear: both Žádný z předchozích prvků nemůže být vedle tohoto prvku clear: left Žádný z předchozích prvků nemůže být nalevo od tohoto prvku clear: right Žádný z předchozích prvků nemůže být napravo od tohoto prvku Ivo Peterka, FHS UK 2009

6 Plovoucí a neplovoucí prvky
Je-li jeden z prvků neplovoucí, pak vzdálenost mezi prvky je větší z jejich margin vlastností. Jsou-li oba prvky plovoucí, pak vzdálenost mezi nimi je součet vlastností margin jednotlivých prvků. Ivo Peterka, FHS UK 2009