Obrázek ukazuje, že ve výchozím stavu se šířka bere bez paddingu a borderu. Chcete-li do šířky počítat i padding a border, můžete na to použít vlastnost box-sizing.

Řádkové prvky a jejich šířka

Vlastnost width nefunguje na řádkové prvky (např. odkaz <a>). U nich je potřeba pro změnu šířky říci, že jsou blokové (display: block;) a ne řádkové, což ovšem za nimi zalomí řádek. Lepší je hodnota display: inline-block;, což umožní nastavit šířku, ale řádek nezalomí.

Chcete-li například odkazu (typický řádkový prvek) nastavit šířku, musíte ho převést na blokový prvek nebo inline-blokový:

<a style="display: inline-block; width: 200px;" href="/kamkoli">široký text odkazu</a>

Priorita min-width a max-width

Pokud jsou u jednoho prvku ve sporu hodnoty width, max-width a min-width, vždycky vyhraje min-width. Potom max-width. Teprve nakonec, když není ve sporu s max-widt nebo min-width, se uplatní šířka nastavená přes width.

(Max-width je maximální šířka, min-width minimální šířka. Pokud nechápete, kde se to může stát, tak třeba na mobilech nebo obecně kdekoli, kde neznám předem šířku prohlížeče a chci max-width nebo min-width použít.)