CSS BOX Model
What is CSS BOX Model
Each HTML element in a document contains a rectangular area. These boxes are containers that surround each element.
The web browser considers these rectangular boxes as Box Model.
From outside to inside, it contains Margin, Border, Padding and the content.
As, there are 4 sides of the area, so each side of the box model has –
- top-margin, right margin, a bottom margin, and left margin
- top-border, right border, bottom border, and left border
- top-padding, right padding, bottom padding, and left padding
- width and height of the content area
Example of CSS Box Model
<style>
.box_model {
width: 700px;
Height: 70px;
padding: 10px 15px;
border:10px solid pink;
margin: 15px 10px;
}
.box_model1 {
width: 720px;
Height: 70px;
padding: 10px 10px;
border:10px solid powderblue;
margin: 15px 05px;
}
</style>
Import Note for Designers
It is important to note that the width and height of the element is different from the width and height of the content area.How to calculate the size of the Box or the size of the entire element
Suppose the element is surrounded with these values,
width: 400px; /*width of the content area*/
height: 50px; /*height of the content area*/
padding: 5px 10px; /*space between outer edge of the content to inner edge of border */
border: 4px solid red; /*space between outer edge of Padding to inner edge of margin */
margin: 5px; /*space between outer edge of border to inner edge of margin itself */
then, what is the total width and height of the entire element?
To calculate the total length:
width: 400px;
Height: 50px;
padding: 5px 10px;
border: 4px solid red;
margin: 5px 8px;
Total width of element = width of the content + left padding + right padding + left border + right border + left margin + right margin
= 400px +10px + 10px + 4px + 4px + 8px + 8px
= 444px
Total height of element = height of the content + top padding + bottom padding + top border + bottom border + top margin + bottom margin
= 50px +5px + 5px + 4px + 4px + 5px + 5px
= 78px
Padding
Padding is space between the outer edge of the content to the inner edge of the border.
It is the transparent area where space can be the same for all the sides or we can set different spaces for different sides.(Refer CSS Padding to learn about this.)
Border
The border is the space between the outer edge of Padding to the inner edge of the margin.
The border is used to set a border around the elements. To learn, more about borders, Click CSS border page.
Margin
The margin is the space between the outer edge of the border to the inner edge of the margin itself.
It is also the transparent area where space can be the same for all the sides or we can set different spaces for different sides.(Refer CSS Margin to learn about this.)
CSS Interview Questions and Answers
In the CSS box model, each element is represented as a rectangular box containing padding, border, margin built up around one another. Before creating a CSS layout we need to understand the CSS box model. We can also say the box model as a container which holds multiple properties.
Box model properties are:-
content
padding
margin
borders
Here the width and height property is calculated like the following:
width + padding + border = actual width of an element
height + padding + border = actual height of an element
When you set the width/height of an element, the element often appears bigger than you have set.