P2- Explain the features of the box model for CSS

Introduction 
 I am going to briefly explain the box model for CSS and also explain how they are used. There will also be illustrations and diagrams to help explain the box model. 


Every single element on a web page is a box. The word " box model" used when talking about the design and layout of a website. The CSS box model is a box that wraps around the HTML elements. This contains the following: Margins, Borders, Padding and the content them self.

This is a diagram of the Box Model




Margin 
The margin clears the area outside the border (element). As this is transparent it means it has no background colour ( its basically the areas with nothing on it). The position of the margin (top, bottom, left, right) can be changed by using CSS to specifically change the different sides for the margin.

For Example: 

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

Border

The border property lets you change the style  e.g. dashed border, the colour as well as the thickness of the borders on your website. Some of the key words for the border style include: Dotted- this produces a dotted border, Dashed- this produces a dashed border, Solid- this produces a sold border and Double- this produces two borders together.

For Example: 

h1
{
border-style:dashed;
border-width:50px;
}

Padding

The padding clears the area inside the border. The main difference between padding and margin is that padding is affected by the background colour of the element, whereas the margin will always be transparent. All sides of the padding can be changed independently. 

For example:

padding-top:25px;

padding-bottom:50px;

padding-left:30px

padding-right:30px

An example of all the elements of the box model used together:

box{

       border-style:dashed;

       padding-top:25px;

       margin:30px;

       width:100px;

       }

Content

The content is the centre of the box model. This is where all the text and images are stored on the website. It is basically the main section with all the information your website would need.

...............................................................................................................................................

Reference 

1. Box Model - 17/01/2013 - http://www.w3schools.com/

2. CSS Box Model - 17/01/2013 - http://bit.ly/4goNJE

3. Yahoo Answers - 17/01/2013 - http://yhoo.it/V6an2g