CSS Margins

Using margins you can specify the amount of space that should be around a specific HTML element.

 

You can specify just one margin value for all sides of an element. You can also specify the border, border width and border color for the margin.

 

Example:

 

If you wish to specify the margin around an element such as the paragraph, you must specify:

 

p{margin: 1px; border: 1px solid red;}

 

Output

 

This paragraph has a margin of one pixel around on top, left, right, bottom. Border color is red and border weight is solid.

 

 

You can set individual margins values for the various sides of an element such as the top, bottom, left and right sides of an element.

Example:

If you wish to specify the margin values for each side of an element such as the paragraph, use the following code:

p{ margin-top: 1px; margin-right: 2px; margin-bottom: 2px; margin-left: 2px; border: 2px solid red; }

Output

This paragraph has a margin of two pixel around the right, top, left and bottom. Border color is red and border weight is solid.

 

 

You can alternatively set margin values for each side of an element by specifying all values of them at once.

 

Example:

 

If you wish to specify the margin values for each side of an element at once, use the following code:

 

p{margin: 0px 5px 10px 3px; border: 1px solid red;}

 

Note:

 

You can see the margin spacing for an element when you set the element amidst other elements. The margin will create spacing around the element according to value you have set for each side of the element individually or according to the value that you have mentioned for all margins.

css.php