Setting the CSS Height and Width
If you want to define the height and width of an element, then you can use height and width properties.
The width/height properties do not cover margins, padding, or borders.
CSS height and width Values
Here are given below the values of the height and width properties:
- auto – the browser deliberate the height and width value to apply
- % – we define a height and width in % of the width of the containing element
- length – we define height and width value in px, pt, cm, etc.
- inherit – specifies that the height and width always inherited from the parent element
CSS height and width Examples
Let’s see the given example to understand how width/height properties works:
Example #1
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
width: 400px;
height: 250px;
}
</style>
</head>
<body>
<p class="bor-test">This paragraph has a height of 250 pixels and a width of 400 pixels.</p>
</body>
</html>
Output
This paragraph has a height of 250 pixels and a width of 400 pixels.
Example #2
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
width: auto;
height: 150px;
}
</style>
</head>
<body>
<p class="bor-test">This paragraph has a height of 150 pixels and a width of auto.</p>
</body>
</html>
Output
This paragraph has a height of 250 pixels and a width of auto.
Example #3
<!DOCTYPE html>
<html>
<head>
<style>
.bor-test {
width: 60%;
height: 320px;
}
</style>
</head>
<body>
<p class="bor-test">This paragraph has a height of 220 pixels and a width of 60%.</p>
</body>
</html>
Output
This paragraph has a height of 220 pixels and a width of 60%.