CSS Box Model
Box Models Tutorial in CSS with Programming Examples
In this tutorial we will learn the CSS Box Models all definition and about Box Models with programming examples.
CSS Box Models
In CSS, Box Models is used to foundation of design and layout of the websites and webpages. It is simply a box or a design rectangular. The CSS box consists of margin, content, padding, border and height weight of the border, through this CSS Box Models we create an impressive and beautiful HTML Box and design the elements.
Before we can study and create the CSS Box layout, we have to understand CSS Box Models, In CSS box models each element is represented as a box with the following properties below.
- Padding: It is used to make space and area between the outer and inner edge of the content box and it is the transparent properties.
- Margin: It is used to make area or outer space of the border and outer CSS Box; it is also the transparent properties.
Content: It is also called the area and content box; it is the area where the content of the box is displayed.
- Border: This is the area between margin and the padding, we can change this width, color and style.
Here is the illustration of CSS Box Models for your better understanding.
 |
This is the illustration of CSS Box include margin, padding, content and border.
Now we see the programming example of border, padding and margin with the programming outputs. You can see the below the program to understanding better.
Programming Example of padding, border and margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<metavname="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Box</title>
<style
type="text/css">
div{
margin: 10px;
padding: 20px;
border: 5px solid red;
}
</style>
</head>
<body>
<div>Here is content of CSS Box</div>
</body>
</html>
|
Output of above programming example,
 |
Above output of example, you can see the padding, margin, and border of the box and in center the content text.
Height and Width of CSS Box
Now here we learn to set the width and height of the CSS box, and its calculation is different, we also learn the calculation of width and height of CSS Box.
To get the total width and height of the CSS Box we have to use the following calculation formula.
You must have the noticed the width and height of CSS properties only set the width or height of the content box not the entire CSS Box.
 |
The total height of an element should be calculated like below the calculation.
- CSS Box’s Height: Here the calculation of (top border’s height + top padding’s height + bottom padding’s height + content box’s height + bottom border’s height).
CSS Box’s height is calculation like this– (Addition of all the element height, see below how)
+ 10px (border top)
+ 10px (padding top)
+ 20px (border bottom)
+ 100px (content box’s height)
+ 10px (padding bottom)
= 150px is the height of Box
The total width of an element should be calculated like below the calculation.
-
CSS Box’s Width: Here the calculation of (left padding’s width + left border’s width + content box’s width + right padding’s width + right border’s width)
CSS Box’s width is calculation like this– (Addition of the all element width, see below how calculate)
+ 20px (left padding)
+ 20px (right padding)
+ 100px (content box’s width)
+ 10px (left border)
+ 10px (right border)
= 160px is the width of Box
Now here we see the example of width and height of the CSS Box with programming output.
Example of CSS Box Width & Height
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Box</title>
<style type="text/css">
div{
padding: 20px;
width: 100px;
height: 100px;
border: 30px solid darkgreen;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
Output of above programming example
 |
You can see the output of above programming output; its total weight or height would be 290px. You see the above calculation formula, those formula is followed this example.
If the border height and width is still same as written in code, we need to use the box-sizing CSS property be set to border-box.
Example of box-sizing
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>CSS Box</title>
<style type="text/css">
div{
box-sizing: border-box;
padding: 20px;
width: 100px;
height: 100px;
border: 30px solid darkgreen;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
|
Output of above programming example
 |
Above you can see the output of programming example, here we see the border-box to still the size is same as coding.
Here the final width/height of the element is only 100px, it is because the padding and border are already included inside the 100px.
 |
CSS Box Terminologies
- border box/area – Using this property for content area and the element’s padding are combined.
- content box/area – The area where the content of the box is displayed.
- margin box/area – The border area and the element’s margins combined.
- padding box/area – Using this property to the content area and the element’s padding combined.
In this tutorial we learned the CSS Box Models and also see the programming examples of all the coding, I hope you all understand this tutorial, if you have any queries and any doubt you can ask in the comment section and use the contact us page.
Also Read-
3 Comments
zoritoler imol · July 3, 2022 at 2:47 pm
I’ve recently started a website, the info you provide on this site has helped me greatly. Thanks for all of your time & work.
samsung-smart-switch.web.app · December 5, 2022 at 3:12 am
Hey! I’m at work browsing your blog from my new iphone
3gs! Just wanted to say I love reading your blog and look forward to all your posts!
Keep up the excellent work!
Emmett Ohashi · January 16, 2023 at 9:23 am
Pretty nice post. I just stumbled upon your weblog and wished to say that I have really enjoyed surfing around your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon!