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.
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>
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.
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
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>
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!
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!
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).
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>
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.
Ställer in höjden på ett element
Ställer in den maximala höjden för ett element
Ställer in den maximala bredden på ett element
Ställer in minsta höjd för ett element
Ställer in minsta bredd på ett element
Ställer in bredden på ett element