The CSS Box Model

                                                                                               
 
In the middle there is an HTML element like a <p>, <h> or <div> with some height and width. Then there is padding around it and then some border and then finally outside there is margin, which decides the room between an element and its surroundings. Consider the following example of CSS to understand how it works:

.MyMainDIVClass

{

               Width:100px; Height:100px; padding:10px; border: 2px solid gray;

}

…

<div class=’MyMainDIVClass’>

This is box model explanation.

</div>

So what will be the width of this div? So answer is 124px. Because 100 + Padding on both sides =20  makes 100+20=120 and then border on both sides =4 makes 120+4=124

Similarly height will also be 124 by same calculation.

So this how CSS box model works.