Som nämnts i föregående kapitel; ett element på blocknivå tar alltid upp hela den tillgängliga bredden (sträcker ut åt vänster och höger så långt den kan).
Om du ställer in bredden
för ett element på blocknivå kommer det att förhindra att det sträcker sig ut till kanterna på sin behållare. Sedan kan du ställa in marginaler till auto, för att horisontellt centrera elementet i dess behållare. De element kommer att ta upp den angivna bredden och det återstående utrymmet kommer att delas lika mellan de två marginalerna:
Obs! Problemet med <div>
ovan uppstår när webbläsarfönstret är mindre än bredden på elementet. Webbläsaren lägger sedan till en horisontell rullningslist på sidan.
Om du istället använder max-width
i den här situationen kommer du att förbättra webbläsarens hantering av små fönster. Detta är viktigt när du gör en webbplats användbar på små enheter:
Tips: Ändra storlek på webbläsarfönstret till mindre än 500 pixlar brett för att se skillnaden mellan de två diverna!
Här är ett exempel på de två diverna ovan:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
Prova själv →
<!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>