Back to: CSS Tutorials for Beginners and Professionals
CSS Height and Width Properties with Examples
In this article, I am going to discuss CSS Height and Width Properties with Examples. Please read our previous article where we discussed CSS Box Model with Examples. The CSS height and width properties are used to set the height and width of an element.
Setting Height and Width using CSS Height and Width Properties
The CSS height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height and width of the area inside the padding, border, and margin of the element.
CSS Height and Width Properties Values
The CSS Height and Width properties may have the following values:
- auto – This is the default value. The browser calculates the height and width
- length – Defines the height/width in px, cm etc.
- % – Defines the height/width in percent of the containing block
- initial – Sets the height/width to its default value
- inherit – The height/width will be inherited from its parent value
CSS Height and Width Properties Examples
We can set the height and width of any element basically in two-unit percentages and pixels.
Task1: Let’s set a background color blue of 500px height and width.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
width: 500px;
height: 500px;
background-color: blue;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
</section>
</main>
</body>
</html>
Output:
Following is the Box Model
Task2: Set the background color red for height and width 100%
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
width: 100%;
height: 100%;
background-color: red;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
</section>
</main>
</body>
</html>
Output:
So, in the first case when setting the height of 500 px and width of 500px it does take exactly the same height. But in the case of percentage when we set the height of 100% it doesn’t seem to be taking 100% height why is this so? Let’s find out.
Answer: 100% height refers to the available height given by the parent container. So, in the above case, we are trying to set the height 100% of the section which has a parent main.
Now, if we inspect the main container, we could see the blue area is much bigger than the tiny bit on a blue box grows by but that area, that height of the main element is calculated dynamically by the content it holds, so it’s only as big as its content requires it to be.
Now it’s creating kind of an infinite loop, if we say a part of the content should be 100% of the size of the main area and the main area says I’m only as big as I need to be, then the 100% basically has no effect. If we wanted it to have an effect, we would need to change the height of the main area 100% too we’re now referring to its parent which is the body and that again is only as big as it needs to be, so we got the same situation as before.
So, only if we set the body to the height 100% too and we do the same for HTML which is the parent of the body, which is only as big as it needs to be, so now if we set this to 100% on HTML too, now we finally get a blue area that is just as big as our page because now starting at the HTML element which now refers to the overall window if we set the height to 100%, we pass the relative height of 100% down to that section.
So, if you ever want to style the height of an element relative to the height of your page, you need to create such a chain where you pass the page height down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
width: 100%;
height: 100%;
background-color: blue;
}
main{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
html{
height: 100%;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
</section>
</main>
</body>
</html>
Output:
CSS BOX Sizing
When we change the height and width of any element what exactly did, we change? When we set the height and the width, did we set the height and width of the content, or the content plus the padding, or the content, the padding, and the border, or the content the padding, the border, and the margin?
Let’s add a border of 5px black color solid to our last HTML CSS code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
width: 100%;
height: 100%;
background-color: blue;
border: black solid 5px;
}
main{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
html{
height: 100%;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
</section>
</main>
</body>
</html>
Output:
Everything seems to be okay right? The border exactly takes the same width and height of the page. Now, add some padding and margin and see the difference.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
width: 100%;
height: 500px;
background-color: blue;
border: black solid 5px;
padding: 20px;
margin: 30px;
}
main{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
html{
height: 100%;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
</section>
</main>
</body>
</html>
Output:
There is a scroll bar does appear which basically means now the width 100% doesn’t seem to be working as it should take width 100% which basically means the exact width of the page but it is taking the more space as compared to the page width which makes the border shifted to the right side. If we inspect the element section we will find something like this
We have set the height to 500px but, it is 550. Where does this 50px come from? It is basically calculating
500px (height set) + 40px padding (20px top padding + 20px bottom padding) + 10px border (5px top border + 5px bottom border) = 550px
This happens because all elements by default happen to have a certain way of calculating width and height which is called a content box, we can set this behavior by adding the box-sizing property to the element where we want to change it, and the default here is content-box. This means if we set a width and height, we set the width and height of the content, not of the entire box including padding and border.
If we set it to border-box though, now width and height include padding and border, they don’t include the margin and we can’t make it to include that. Now, let’s set the box-sizing to box-sizing to border-box and inspect we will find this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<style>
#product-overview {
width: 100%;
height: 500px;
background-color: blue;
border: black solid 5px;
padding: 20px;
margin: 30px;
box-sizing: border-box;
}
main{
height: 100%;
}
body{
height: 100%;
margin: 0;
}
html{
height: 100%;
}
</style>
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<section id="product-overview">
<h1>Get the freedom to learn from anywhere anytime!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
<h1>Some other text!!</h1>
</section>
</main>
</body>
</html>
Output:
This time when we have set the same height 500px but this time this height is calculated including the padding and border.
In the next article, I am going to discuss Display Property in CSS with Examples. Here, in this article, I try to explain Height and Width Properties in CSS with Examples. I hope this CSS Height and Width Properties with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.