The CSS Box Model

The CSS box model is the one which model which is implemented while rendering images in any browser. It takes care of the boxes that are formed around the content in any Webpage. Every element under consideration is as a box, and this factor does not depend upon the actual shape of the object. It might be an ellipse, but would still be represented in a box.

 

Parts of the CSS box model

 

There are four parts

1)Margin

2)Border

3)Padding

4)Content

 

Margin is the periphery of the box. It is transparent and is projected like a sapce between various elements on the page. Margins can intermingle with one another, in such a way that one’s lower margin becomes the upper margin of another element, or right of one becomes left of another.

 

An example of the margin code gives the following output.

 

<p style=margin : 2em;”>

This paragraph has a 2em margin on all sides

</p> 

 

 

Border follows the margin, and it can be given a color or can be kept as transparent. It can be removed altogether, and when it is removed, it mixes with the padding of the box of the element.

 

An example of Border code has the following output.

 

<p style=border : 2em solid#c00;”>

This paragraph has a 2em solid red border

</p> 

 

 

Padding is the space which lies between the content of the box and its respective border. It follows the same color as the background of the box, and if it is set to 0, it becomes same as the content border.

 

An example of Padding code is given

 

<p style=padding : 2em;”>

This paragraph has a 2em top padding.

</p> 

 

 

Content is the basic element which is displayed inside the box. This can be anything which is present inside. The content has two elements, width and height.

 

The width, is the basic width of the element inside the box. The default value is 500px which can be modified by the code below.

 

<p style=”width : 700px;”>

 

The height, is the height of the box, and the default value it takes is again 500px. The code for modification is

 

<p style=”height : 700px;”>

 

A sample code gives the following output

 

<p style=”border : 2em solid #c00;width : 100px;height : 120px”>

This is a modified block size with different height and width from default.

</p>

 

 

The box model has few other considerations as well, which are the elements which influence the box style.

 

Block Level Elements are elements which create blocks or groups of text in a page. They can be paragraphs, backquotes, tables etc. They have certain directionality and can contain data, text and inline elements. They create boxes within the document.

 

Inline Elements are found in the text of HTML, and influence the textual properties. They can be strong and abbr tags, etc. They do not change the flow of the document, and influence the inline text.

 

This lays the foundation of the basic model that is followed by every document. However, the implementation of every above tag is browser specific, and can vary from browser to browser because of different styling.