Unit 20 - P2 Explain the features of the box model for CSS

Unit 20 - P2 Explain the features of the box model for CSS

The design and layout of html is shown through the form of a "box model". This is crucial for creating a well laid out and presented website which will create a clean yet simple design that will help users with their needs via the website. 
 
The box model simply ‘wraps up’ other boxes around the foundations which can consist of margins, borders, padding and footers. The box model allows a web developer to be able to change any part of the dimensions of the box and make it fairly easy to read each part of the website for a person to read.

 
There are four main layers:

1. Margin – The margin simply creates an area around the border of the box; the margin is not visible and therefore blends in with the website background itself. The margin lets space from the outside of the box to be left empty by a certain amount (depending on what the coder inputs).

2. Border - The border goes around both the padding and the content. The border is not transparent and so can have its own colour. Its thickness and type can also be changed, for example: five pixels thick with a dotted line style.

3. Padding - The padding is a clear space between the content and border and it just adds space to a specific region where the content is placed in so that it will be easier to read for users. The padding does this by having a space making sure the border isn’t touching the text or too close; it’s this that makes it easier to read. is can be easy to read and so the border does not touch the content.

4. Content – This is fairly self-explanatory as the contents sits right in the middle of all the layers. All the layers I have mentioned will be around the content.

Also the overall width or height can be defined with each box model although you may also change specific sides of the box such as have a greater padding from the left to get clearance from the edge of the browser. The box will have to be defined with a div tag which will then relate it to the class in the stylesheet.

Here is an example of a box being defined with a div tag and then in used in the stylesheet:

The html file will have:
<div class="box"> *content*  </div>


The cascading style sheet will have:
<!--[endif]-->

.box {

width: 400px;

padding: 20px;

border: 5px solid black;

margin: 10px;

}

Every single part of the box is set through the style sheet for example the: width, height, padding, colour etc…

References:

8 Box model, 14/12/2012, http://bit.ly/H4hj0
The CSS box model, 12/12/12, http://bit.ly/4goNJE