CSS-egenskaberne height og width bruges til at indstille højde og bredde af et element.
CSS-egenskaben max-width bruges til at indstille den maksimale bredde af et element.
Prøv det selv →
<!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>
Egenskaberne height og width bruges til at indstille højde og bredde af et element.
Højde- og breddeegenskaberne inkluderer ikke polstring, kanter eller marginer. Den indstiller højden/bredden af området inden for polstring, kant og margen af elementet.
Egenskaberne height og width kan have følgende værdier:
auto - Dette er standard. Browseren beregner højde og bredde
længde - Definerer højden/bredden i px, cm, etc.
% - Definerer højden/bredden i procent af den indeholdende blok
initial - Indstiller højden/bredden til dens standard værdi
arve - Højden/bredden bliver arvet fra sin overordnede værdi
Indstil højden og bredden af et <div>-element:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}Prøv det selv →
<!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>
Indstil højden og bredden af et andet <div>-element:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}Prøv det selv →
<!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>
Bemærk: Husk, at egenskaberne height og width ikke inkluderer udfyldning, kanter , eller marginer! De indstiller højden/bredden af området inde i polstringen, grænsen, og elementets margin!
Egenskaben max-width bruges til at indstille den maksimale bredde af et element.
max-width kan angives i længdeværdier, såsom px, cm osv., eller i procent (%) af indeholder blok eller indstillet til ingen (dette er Standard. Betyder, at der ikke er nogen maksimal bredde).
Problemet med <div> ovenfor opstår, når browservinduet er mindre end bredden af elementet (500px). Browseren tilføjer derefter en vandret rullepanel til siden.
Brug af max-width i stedet vil i denne situation forbedre browserens håndtering af små vinduer.
Tip: Træk browservinduet til mindre end 500 px bredt for at se forskellen mellem de to divs!
Bemærk: Hvis du af en eller anden grund bruger både width egenskaben og max-width egenskab på det samme element og værdien af width egenskaben er større end max-width egenskab; det Egenskaben max-width vil blive brugt (og Egenskaben width vil blive ignoreret).
Dette <div>-element har en højde på 100 pixels og en maks. bredde på 500 pixels:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}Prøv det selv →
<!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>
Indstil højden og bredden af elementer
<!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>
Dette eksempel viser, hvordan man indstiller højden og bredden af forskellige elementer.
Indstil højden og bredden af et billede ved hjælp af 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>
Dette eksempel viser, hvordan man indstiller højden og bredden af et billede ved hjælp af en procentværdi.
Indstil min-bredde og max-bredde af et 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>
Dette eksempel viser, hvordan man indstiller en minimumsbredde og en maksimal bredde for et element ved hjælp af en pixelværdi.
Indstil min-højde og max-højde for et 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>
Dette eksempel viser, hvordan man indstiller en minimumshøjde og en maksimal højde for et element ved hjælp af en pixelværdi.
Indstiller højden af et element
Indstiller den maksimale højde for et element
Indstiller den maksimale bredde af et element
Indstiller minimumshøjden for et element
Indstiller minimumsbredden af et element
Indstiller bredden af et element