Ahogy az előző fejezetben említettük; egy blokkszintű elem mindig a teljes elérhető szélességet veszi fel (balra és jobbra nyúlik, amennyire csak tud).
Egy blokkszintű elem szélességének beállítása megakadályozza, hogy az elem megnyúljon ki a tartály széléig. Ezután beállíthatja a margókat automatikusra állítja, hogy vízszintesen középre állítsa az elemet a tárolójában. A elem elfoglalja a megadott szélességet, és a fennmaradó terület felosztásra kerül egyenlő mértékben a két margó között:
Megjegyzés: A fenti <div> probléma akkor jelentkezik, ha a böngészőablak kisebb, mint a szélessége az elem. A böngésző ezután vízszintes görgetősávot ad az oldalhoz.
A max-width használata ebben a helyzetben javítja a a böngészőben a kis ablakok kezelése. Ez fontos egy webhely használhatóvá tételénél kis eszközökön:
Tipp: Méretezze át a böngészőablakot 500 képpontnál kisebbre, hogy lássa a különbséget a két div!
Íme egy példa a fenti két divre:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}Próbálja ki Ön is →
<!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>