HEIGHT – css vlastnost nastavující výšku HTML elementu
Někdy je zapotřebí nastavit výšku určitého HTML elementu (značky). Výška se sice počítá automaticky, ale často ji potřebujete nastavit jinak. Právě to si zde vysvětlíme.
Existuje v CSS 1, 2 a 3 | není dědičný | dobře podporován všemi prohlížeči
Kdy se HEIGHT dá použít a kdy ne
Není možné ho použít u tzv. inline elementů. Inline elementy si totiž výšku vypočítávají samy. Klasickým příkladem je HTML element <a>. Pokud ohraničí jen část obsahu (třeba jedno slovo ve větě), pak mu logicky nemůžete nastavit výšku. Jeho výška se totiž vypočítává z výšky řádku.
Naopak se HEIGHT dá použít u každého blokového elementu, jako je např. <div>, <img>, <iframe>...
Hodnoty vlastnosti HEIGHT
- 1px – číselné v pixelech, pixel je obrazový bod a při tvorbě webových stránek se používá nejčastěji
- 1% – číselné v procentech, která není absolutní (neměnná), prohlížeč rozměr dopočítá vůči nadřazenému HTML elementu
- auto – automaticky se dopočítá, a proto není absolutní, pokud nastavíte nějaký element o definované šířce (např. DIV) vlevo a vpravo na hodnotu "auto", pak bude element vždy přesně uprostřed, protože se vlevo i vpravo prohlížeč dopočítá stejný rozměr
- 1vw – šířka v procentech okna internetového prohlížeče
- 1vh – viditelná výška okna internetového prohlížeče
- 1mm – číselné v milimetrech, používá se pro tisk, který se udává v metrické soustavě
- 1cm – číselné v centimetrech, používá se pro tisk, který se udává v metrické soustavě
- 1in – číselná v palcích (1in = 2,54cm) a užívá se pro tisk tam, kde se počítá v palcích
- 1pt – číselná v typografických bodech (1/72 palce), které se používají u fontů
- 1pc – číselná pica což je 12px
- 0 – u nuly není nutné psát hodnotu
Výška v CSS v určitých limitech od do
CSS vlastnost min-height a max-height
Často potřebujeme nastavit šířku v určitých limitech. Příklad zde:
div{
min-height: 50px;
max-width: 100px;
}
Kam dál
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla