Die height und width Eigenschaften werden verwendet um eine Höhe oder Breite einem Element zu zuweisen.
Die height and width Eigenschaften beinhalten weder padding, border oder margin.
Die height und width Eigenschaften können folgende Werte haben:
auto: Der Browser berechnet die Höhe und die Breite.
Länge: cm etc.
%: Breite in Prozent vom beinhalteten Block.
initial/Breite auf seinen Standard-Wert.
inherit/Breite wird geerbt von seinem Eltern-Element.
<!DOCTYPE html>
<html>
<head>
<style>
main {
height: 200px;
width: 50%;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die height und width Eigenschaften eines Element</h2>
<p>Dieses main-Element hat eine Höhe von 200px und ein Breite von 50%:</p>
<main>
</main>
</body>
</html>
Dieses main-Element hat eine Höhe von 200px und ein Breite von 740px:
<!DOCTYPE html>
<html>
<head>
<style>
main {
height: 200px;
width: 740px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die height und width Eigenschaften eines Element</h2>
<p>Dieses main-Element hat eine Höhe von 200px und ein Breite von 740px:</p>
<main></main>
</body>
</html>
Die max-width Eigenschaft legt die maximale Breite eines Elementes fest.
Die max-width kann einen Wert haben wie px, cm, etc. oder in Prozent (%) vom beinhaltenden Block.
<!DOCTYPE html>
<html>
<head>
<style>
main {
height: 200px;
max-width: 740px;
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Die height und max-width Eigenschaften eines Element</h2>
<p>Dieses main-Element hat eine Höhe von 200px und ein max. Breite von 740px:</p>
