BOX MODEL - CSS

 BOX MODEL

To work on perfect design and layout, one must understand the "Box Model".  The  CSS Box model is the box that wraps around all, the HTML elements.  The figure below shows the "Box Model"

                        

• Content - All the content within the element is inside the content box.
• Padding - A space around the content till the border, this space is padding.
• Border - A border that goes around the padding and the content.
• Margin - The space around the border. This border makes the space between other elements.

 Every element in HTML can be designed with the help of a box model to get the perfect layout. To achieve the best layout on all browsers, one must be able to understand how the box model works.

Example:

div {

width: 400px;

height: 600px;

padding: 20px;

border: 5px solid black;

margin: 1px;

}

For the above example, the div box model is shown below

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

  The width of the above-mentioned div is

  width = 400 + 20 + 20 + 5 + 5 + 1 + 1 = 452px.

Total height = height + padding top + padding bottom + border top + border bottom + margin top +                               margin bottom.

The height of the above-mentioned div is 

height = 600 + 20 + 20 + 5 + 5 + 1 + 1 = 652px.

 So the size of the div is 452px * 652 px.