WIDTH – css vlastnost nastavující šířku elementu
Někdy je zapotřebí nastavit šířku určitého HTML elementu (značky). Šíř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 WIDTH dá použít a kdy ne
Není možné ho použít u tzv. inline elementů. Inline elementy si totiž šíř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 šířku. Jeho šířka se totiž vypočítává z počtu a rozměru písmen.
Naopak se WIDTH dá použít u každého blokového elementu, jako je např. <div>, <img>, <iframe>...
Hodnoty vlastnosti WIDTH
- 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
Šířka v CSS v určitých limitech od do
CSS vlastnost min-width
Často potřebujeme nastavit šířku v určitých limitech. Uvedu to na příkladu. Máme nastavenou šířku v procentech, ale nesmí se nám dostat pod určitou hranici. V takovém případě vyžijeme CSS vlastnost MIN-WIDTH.
div{
width: 50%;
min-width: 100px;
}
CSS vlastnost max-width
Jedná se o opačný případ, kdy naopak potřebujeme určit maximální šířku.
Kam dál
Naše služby Kurz základy HTML a CSS Kurz tvorby webových stránek pomocí systému Joomla Seznam CSS vlastností