CSS-layout - bredd och maxbredd


Innehållsförteckning

    Visa innehållsförteckning


Använda bredd, maxbredd och marginal: auto;

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:

This <div> element has a width of 500px, and margin set to auto.

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:

This <div> element has a max-width of 500px, and margin set to auto.

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:

Exempel

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>