Home Advertise with us Forum Articles Sitemap Contact
Logo  

CSS Margin

As explained in the Box Model, margin is the transparent white space around the border of the HTML element, which defines the relationship between different elements. It does not have any background color.

It is possible to independently modify the right, left, top & bottom margins using different CSS properties. One may also use the shorthand property to change all the margins at once. There are three types of values that can be used to change the margins:

  • length – this is used to define a fixed margin either in pixels, em, pt or others.

  • auto – the browser auto sets the margin. Thus, this depends on the browser.

  • % - the margin is defined in percentage of the containing element.

Just like borders, for the margins also it is possible to define different styles for the different sides.

Example:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;


Since there are several properties that can be considered while defining a margin, a shorthand property can be used to specify all the margin properties within one property.

Example: margin:100px 50px;
 

HTML Tip 1

Use only hexadecimal #RGB values for colors. The behavior of named colors is browser-idiosyncratic and totally unpredictable.
 
 

HTML Tip 2

You can resize your images without a graphics program by changing the HEIGHT and WIDTH in your image tag.