You will find all the elements in HTML creating a rectangular box. This box is generally known as the element box. The purpose of this element box is that it specifies how much space each element and its various properties will take within a layout of the document. Let’s explain this with the help of an example. Suppose you have an element which is 3 inches tall. So the element succeeding it will have a distance of 3 inches from the top of the document. If the first element squeezes by one inch, then the following element will have similar reduction in the distance from the top of the document.

Web designers have now more control over the positioning of the text and various elements on a web page, thanks to Cascading Style Sheets. You can also influence the placing of elements over each other. For your benefit, box properties like width, height, margin and padding do an efficient work by affecting the location and shape of your text elements. The margin has sub-properties like margin-top, margin-left, margin-bottom and margin-right. The same sub-properties are available for padding also.

Let us begin with the width property. The width of an element is calculated from left inside edge of the element to the right inside edge. The setting the width of an element provides you freedom from using tables to build text boxes.

<p style=”width : 120px; border : none; background-color : #cccccc;”>
The box is built with the width property on the paragraph. 120 pixels wide.
</p>

Similarly, you can calculate the height of an element from the top inner edge of the element to the bottom inner edge of the element. With the help of this property, you can generate elements which resemble tables within your document. In some case, the height defined is actually shorter than the text. In that case, the element will be more than the height actually defined.

<p style=”height : 120px; border : none; background-color : #cccccc;”>
Built with the help of CSS. 120 pixels in height.
</p>

The outermost edge of the box is called the margin. It indicates the space between the element and the rest of the elements on a web page. It is quite apparent. Sometimes, margins can overlap with other elements, i.e. the bottom margin of the element collapses over the top margin of the element below it. You can assign the same value to all the margin sub-properties or you can do it separately for each property.

margin : top right bottom left;

To set the margin on one specific side, you can use the margin properties such as margin-top, margin-right, margin-bottom and margin-left.

<p style=”border : none; background-color : #cccccc; margin : 20px;”>
This paragraph has a 20 pixel margin around it.
</p>

The padding is the space between the content and the border. Padding is the same color as the background color for the box. If the padding is set to 0, the padding border is the same as the content border. Using the padding property, you can define all four sides to have the same padding or you can set all four separately with the same property:

padding : top right bottom left;

If you only want to set the padding on one specific side, you can use the padding properties such as padding-left, padding-top, padding-right and padding-bottom.

<p style=”border : none; background-color : #cccccc; padding : 20px;”>
This paragraph has a 20 pixel padding around it.
</p>

Tags: CSS Box Techniques for Proper Positioning