CSS Box Model

Prev
Next

CSS BOX Model

W3C 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>
Run the Code

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.

Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!