Box Model

Link: The Link to  Box Model

 Explanation of Box Model
The box included four areas which are demonstrated in colors.
The properties of the "content" are
margin =purple (between the border and body), border=blue (between the padding and the margins), padding is gray-yellowish (surrounding the writable area) , and the content writable area is yellow.

The body is a flexible  depends on condition of the screen and browser.
However, we set a base font-size of 12px as the base for space calculations.
Create the "Box" and labeled this as "content",colored it with yellow.
We gave this "content"  border a color, which in this case is blue, with solid style.
The width of this border  is 3.5em of the base font size. (42px)
Set h1 and h2margins to "0 so that those tags will not  distort the size of the content writable area.After these steps, you will see the box as shown below.

Summary:
The margin is the purple area,
the border is the blue
The padding is the gray-yellow area.
The content is yellow.
All theses sizes are based on calculation of the base-font-size. 

formula: 12px * ?em

 

see the code below:

 body {

    background-color:#C9F;
    color:red;/*set color therefore
    able to see the effect of the box*/
    font-size:12px;
}
h1 {
    font-size:1.5em;
    margin:0px;
}
h2{
    font-size:1.2em;
    margin:0px;
}
#content{
    background: yellow; /* set the content to yellow for demonstration purpose*/
  
    border:#009; /* blue area */
    border-bottom-style:solid;
    border-left-style:solid;
    border-right-style:solid;
    border-top-style:solid;
    border-bottom:3.5em;
    border-top:3.5em;
    border-left:3.5em;
    border-right:3.5em;
        /* if borders bottom, top, left, right, are set to 0, the border is equal to width of margins* for the demo
    the borders are set to 3.5em of base font size which is 42px*/
  
  
    margin-top:5em;
    margin-bottom:5em;
    margin-left:5em;
    margin-right:5em;
    /* the purple area surrounded the blue border*/
  
    padding-top:6.5em;
    padding-bottom:6.5em;
    padding-left:1.5em;
    padding-right:1.5em;
    /* to declare the padding, the blue area around the yellow content */
}