P2 - Explain the features of the box model for CSS

Box Model CSS

In this blog post i will describe the features of the box model CSS which include margins, borders and padding.

Margins

These are transparent boxes which surrounds the content of a web page any background colour of the web page will not be affected by the margin because it is transparent. A margin clears a specific space that has been coded with a specific size so that any content that is on the web page isn't stuck to the edge of the page. Margins are used so that all the contents on a page aren't all stuck to together and are spaced out. Margins are normally measures in pixels and are normally placed on the top, bottom, right and left.

margin-right:100px;

margin-left:50px;

margin-top:50px;

margin-bottom:50px;

Borders

The border goes around the padding and content, the border can be edited by colour, thickness and styles. The distance between the padding and border can be altered. There are many different combinations of colours, styles and widths that can be used for a border such as:

{

border-style:dotted;

border-colour:#FFFFFF;

border-width:3px;

}

Padding

Padding clears an area of space between the content which is in the center of the box and the border, so that the border doesn't touch the content. When the background of the element is change the padding background is also change to the colour specified in the coding.

H1 {Background: red;

     Color: white;

      Padding: 10px;                                                                                                                       

      }

References:

ww.w3schools.com/css/css_boxmodel.asp
http://webdesign.about.com/od/beginningcss/p/aacss6box.html
http://www.w3.org/TR/CSS2/box.html