CSS höjd, bredd och maxbredd


Innehållsförteckning

    Visa innehållsförteckning


CSS-egenskaperna height och width används för att ställa in höjd och bredd på ett element.

CSS-egenskapen max-width används för att ställa in den maximala bredden på ett element.


This element has a height of 50 pixels and a width of 100%.

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 50px;
  width: 100%;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS height and width properties</h2>

<div>This div element has a height of 50 pixels and a width of 100%.</div>

</body>
</html>



CSS Inställning av höjd och bredd

Egenskaperna height och width används för att ställa in höjd och bredd på ett element.

Höjd- och breddegenskaperna inkluderar inte utfyllnad, kanter eller marginaler. Den ställer in höjden/bredden på området innanför stoppningen, gränsen och marginalen på elementet.


CSS höjd och bredd Värden

Egenskaperna height och width kan ha följande värden:

  • auto - Detta är standard. Webbläsaren beräknar höjd och bredd

  • längd - Definierar höjden/bredden i px, cm, etc.

  • % - Definierar höjden/bredden i procent av det innehållande blocket

  • initial - Anger höjd/bredd till dess standardvärde

  • ärva - Höjd/bredd blir ärvt från sitt modervärde


CSS höjd och bredd Exempel

This element has a height of 200 pixels and a width of 50%

Exempel

Ställ in höjden och bredden på ett <div>-element:

div {
  height: 
200px;
  width: 50%;
  background-color: powderblue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>


This element has a height of 100 pixels and a width of 500 pixels.

Exempel

Ställ in höjden och bredden på ett annat <div>-element:

div {
  
height: 
100px;
  width: 500px;
  background-color: powderblue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 100px;
  width: 500px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 100px and a width of 500px.</div>

</body>
</html>


Obs! Kom ihåg att egenskaperna height och width inte inkluderar utfyllnad, ramar , eller marginaler! De ställer in höjden/bredden på området innanför stoppningen, gränsen, och elementets marginal!



Ställa in maxbredd

Egenskapen max-width används för att ställa in den maximala bredden på ett element.

maxbredden kan anges i längdvärden, som px, cm, etc., eller i procent (%) av innehåller block, eller inställt på ingen (detta är standard. Betyder att det inte finns någon maximal bredd).

Problemet med ><div> ovan uppstår när webbläsarfönstret är mindre än bredden på elementet (500px). Webbläsaren lägger sedan till en horisontell rullningslist på sidan.

Om du istället använder max-width i denna situation kommer webbläsarens hantering av små fönster att förbättras.

Tips: Dra webbläsarfönstret till mindre än 500 pixlar brett för att se skillnaden mellan de två diverna!

This element has a height of 100 pixels and a max-width of 500 pixels.

Obs: Om du av någon anledning använder både width-egenskapen och egenskapen max-width på samma element och värdet på Egenskapen width är större än egenskapen max-width; de Egenskapen max-width kommer att användas (och Egenskapen width ignoreras).

Exempel

Detta <div>-element har en höjd på 100 pixlar och en maxbredd på 500 pixlar:

div {
    max-width: 500px;
  
height: 
100px;
  background-color: powderblue;
}

Prova själv →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width of an element</h2>

<div>This div element has a height of 100px and a max-width of 500px.</div>

<p>Resize the browser window to see the effect.</p>

</body>
</html>



Prova själv - exempel

Ställ in höjd och bredd på elementen

<!DOCTYPE html>
<html>
<head>
<style>
img.one {
  height: auto;
}

img.two {
  height: 200px;
  width: 200px;
}

div.three {
  height: 300px;
  width: 300px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of elements</h2>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>

<p>The height and width of this div element is 300px:</p>
<div class="three"></div>

</body>
</html>


Det här exemplet visar hur man ställer in höjden och bredden på olika element.

Ställ in höjden och bredden på en bild med hjälp av procent

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
}

img.one {
  height: auto;
  width: auto;
}

img.two {
  height: 50%;
  width: 50%;
}
</style>
</head>
<body>

<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>

<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>

<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">

</body>
</html>


Det här exemplet visar hur man ställer in höjden och bredden på en bild med hjälp av ett procentvärde.

Ställ in min-bredd och max-bredd för ett element

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-width: 400px;
  min-width: 100px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>


Det här exemplet visar hur man ställer in en minsta bredd och en maximal bredd för ett element med hjälp av ett pixelvärde.

Ställ in min-höjd och max-höjd för ett element

<!DOCTYPE html>
<html>
<head>
<style>
div {
  max-height: 600px;
  min-height: 400px;
  background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>

<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>

</body>
</html>


Det här exemplet visar hur man ställer in en minimihöjd och en maximal höjd för ett element med hjälp av ett pixelvärde.



Alla CSS-dimensionsegenskaper

height

Ställer in höjden på ett element

max-height

Ställer in den maximala höjden för ett element

max-width

Ställer in den maximala bredden på ett element

min-height

Ställer in minsta höjd för ett element

min-width

Ställer in minsta bredd på ett element

width

Ställer in bredden på ett element