Css3 Box Model View

The box model is nothing but a combination of width, height, margin, padding and borders. No matter how box(container) or object positioned, now this object or content area consider the width and height based on their other properties like margin, padding, and borders along with it will calculate the container total width, based on our example code our object width=242 and height=152. The box model is a core concept in css, without this, you can't make you layout (web application) stylish and makes aligned and provides controllability on the layout.

Most important thing to know if the object has 100% width (width:100%;) that’s should not have other properties like margin, borders and padding any side because that object will appear 100% in the body. Box model supports in all the modern and old browser no need any assistance for supporting all browsers.

Box Model View

Here is the sample view of box model with all properties with dimensions (width, height, margin, padding, border).

Total box width = left margin + left border + left padding + width +
                   right padding + right border + right margin

Total box height = left margin + left border + left padding + height +
                   right padding + right border + right margin

Box Model Simple css

Here is the css example code of box model, we have class called box (.box) and it has many properties(width: 200px;width is property and 200px is value) with values.

<div class="box"></div>
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 1px solid #000;
  margin: 15px;

Box Model View calculating

This is the model view of css3 box model with simple calculation.

Total width = 15 + 1 + 10 + 200 + 10 + 1 + 15 = 252px
Total height = 15 + 1 + 10 + 100 + 10 + 1 + 15 = 152px