Explain the features of the box model for CSS

In this section of my blog, I will be explaining the features of the box model for CSS.I will also describe the different layers of the box model as well as provide a diagram that illustrates the structure of a box model.

The diagram below shows the structure of a box model with the different layers and their names. Some of the layers are actually transparent.

Box model is a type of CSS design and layout coding. As the name suggests it's a box that web page developers use to wrap around elements or tags such as images or <p> Paragraph 1 </p>. The properties of the box model also allow  you to separate different elements or tags from each other.

The MARGIN provides a transparent space between the border, which is visible and the actual sides of the web browsers. Examples of MARGIN properties are "margin-top: 10px;" and "margin-right: 50px;".

The BORDER is a visible coloured outline around the padding and actual content. An example of BORDER properties is              "border: 10px dotted black;". There are different types of borders such as solid, dashed.

The PADDING is similar to MARGIN. It provides a space between the border and actual content. The colour of the space the PADDING provides is affected by the background colour of the box.

The CONTENT is the actual text and images found within the box.

Reference:

1: Box Model, 23/11/2013, http://bit.ly/H4hj0