Min-width

CSS vlastnost min-width určuje minimální šířku prvku.

Šířka prvků je buďto jejich přirozená šířka, 100% dostupné šířky u blokových elementů, nebo šířka určená CSS vlastností width. Vlastnost min-width přináší další způsob, jak šířku prvku předepsat. Uplatní se to zejména v případech, kdy je šířka prvku nastavena procenty nebo závisí na velikosti okna a já zároveň chci, aby nebyla moc mrňavá.

Pokud jsou zadány jak min-width, tak width a jsou v konfliktu, pak min-width přebije width. Min-width vyhraje i nad případným současným nastavením max-width.

Min-width funguje v Exploreru pouze ve standardním módu (přepíná se pomocí doctype). Prohlížeč Chrome (narozdíl od ostatních) trvá na tom, že min-width lze nastavit pouze blokovým prvkům, takže vám nemusí fungovat použití min-width na řádkové prvky nebo například na tabulku. (V takovém případě je potřeba kouzlit s vlastností display.)

CSS vlastnost min-width už se dá používat, protože poslední nepodporující prohlížeč Internet Explorer 6 už de facto zmizel (2011).

Podpora všude

V roce 2021 už jsou i výborně podporovány hodnoty min-content a max-content.

Zaměnitelnost

Pokud někde uvidíte zápis @media (min-width: ..., pak se nejedná o použití této CSS vlastnosti. Ve skutečnosti jde o zápis @media query, který se shodou okolností zapisuje velmi podobně.

Jako fakt nevim, čím přemýšleli, když pro dvě úplně různé věci vymysleli stejné klíčové slovo. No nic.

Příklady

Příklad na min-width

Priority při konfliktních nastaveních

Reklama

Vizte též

• Width = šířka
• Max-width = maximální šířka