MENU

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
  • 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

Potřebujete pomoci? Žádný problém!

Nevíte si s něčím rady a potřebujete rychlou pomoc odborníka? Můžete se obrátit na nás a my vám dokážeme pomoci i přes internet.

Více o on-line pomoci přes internet se dozvíte zde:

On-line pomoc

Pokud nevíte, neváhejte se zeptat

© HelpMark | Tomáš Herout | Tel: +420 739 719 548