Jak bylo zmíněno v předchozí kapitole; prvek na úrovni bloku vždy zabírá celou dostupnou šířku (natáhne se doleva a doprava, jak jen to jde).
Nastavení šířky prvku na úrovni bloku zabrání jeho roztažení ven k okrajům jeho nádoby. Poté můžete nastavit okraje na auto, chcete-li prvek vodorovně vycentrovat v jeho kontejneru. The prvek zabere zadanou šířku a zbývající prostor se rozdělí rovnoměrně mezi dvěma okraji:
Poznámka: K problému s <div> výše dochází, když je okno prohlížeče menší než šířka prvek. Prohlížeč pak na stránku přidá vodorovný posuvník.
Použití max-width v této situaci zlepší ovládání malých oken pomocí prohlížeče. To je důležité při vytváření použitelnosti webu na malých zařízeních:
Tip: Změňte velikost okna prohlížeče na šířku menší než 500 pixelů, abyste viděli rozdíl mezi ty dva divy!
Zde je příklad dvou výše uvedených divů:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>