Box-Model Explained

 

A web page is made up of a many boxes, each box contains a HTML element - the boxes are not always clear but all of the elements that are on the webpage generates its own box. The diagram below shows the general model that is used

 

Box-Model Diagram

Margin – Is an area that is around the border of the webpage, it is transparent and does not have a background colour. The margin is from the edge of the browser to the box, this is shown in the green section of the diagram.

Border – The border is surrounds the padding and the content of the webpage this is shown as the blue box above. The border is from the edge of the Margin to the content.

Padding – This clears the area around the content, this is affected by the background colour of the box. The padding is within the border and it contains the content. It is shown as the Purple box in the diagram.

Content – The content box is where text and images are displayed (the content). This is outlined as the red box in the diagram.

They work by using Div Tags which are inputted in to the code of the webpage as shown below:

In the HTML file:

<div class="a">
        Div Tagging
       </div>

In the Style sheet:

.a{
    background: blue;
    color:red;
    width: 100px;
    height:100px;
    text-align:  center;
    float:clear;

}
 

Example:

Example of Box-Model

 

Above is an example of Amazon's website, as you can see the webpage is made up of many boxes, some boxes are in other boxes.

 

Reference
http://wickham43.net/divboxes.php
http://www.htmlandcsswebdesign.com/articles/boxmodel.php