Working with CSS Box Model in your Web Apps – Part 1

All elements on a web pages are rendered as rectangular boxes. The CSS3 Box model helps us define how this rectangular box is made up. This definition includes specifying margins, border, padding, and content.

 

Per the CSS specification, there are three types of boxes:

• Block-level boxes – These are like paragraphs.
• Line boxes – These are like a line of text.
• Inline-level boxes – These are like words inside a line.

 

Using the box model helps us in the following ways:

• We can space out elements across the page.
• We can define the width of the content
• We can define the spacing between content and the border of the element
• We can define the spacing between elements

 

Consider the following HTML

<ul>

<li>Item 1.

<li>Item 2.

</ul>

 

The above HTML is parsed as one block-level box for “ul”. This contains two “li” block-level boxes, each of which contains one line box. Each line-level boxes contains two inline-level boxes, one for rendering the bullet and the other for the text.

In total, the above HTML has 3 block-level boxes, 2 line boxes and 2 inline-level boxes.

 

Per the definition of “Box model”, we can configure the following elements.

1. Content – This is actually the content in the element
2. Padding – This is the space between the context and the border.
3. Border – This sits outside the padded area and is inside the margin.
4. Margin – This is the area outside the border. The background color/image of an element does not have impact on the margin area.

 

 

The display property is used to specify the type of box and can take the following properties:

• Inline – for inline boxes
• Block – for block boxes
• Inline – block – for block boxes which themselves are flowed as a single inline box.
• List – item
• Run-in – varies between block or inline boxes, depending on context.
• Compact
• None – When no box needs to be generated.

 

The padding property is used to specify the thickness of the padding area. It only accepts positive values. Padding can be specified in two ways:

Example 1:

h1 { padding: 0.5em }

Example 2:

h1 { padding-top: 0.5em;

padding-right: 0.5em;

padding-bottom: 0.5em;

padding-left: 0.5em }

 

The margin property is used to specify the margins. It accepts positive as well as negative values. Margin cab been specified in two ways:

Example 1:

p { margin: 1em 2em }

Example 2:

p { margin-top: 1em;

margin-right: 2em;

margin-bottom: 1em;

margin-left: 2em }

 

 

The width and height properties are used to specify width and height of the element. The values can be specified as explicit values, as percentages or ‘auto’. When ‘auto’ is specified, the value is determined by the values of other properties.

E.g.

p { width: 50px }

 

 

Summary

In this article, we learned about the box model. In a subsequent article, we will learn more about the box model.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

 

References

 

http://www.w3.org/TR/css3-box/