CSS Margin and padding

CSS Margin and padding

p{ margin: 1px 2px 1px 4px; }
p{ padding: 1px 2px 1px 4px; }

CSS Margin and padding both generate a space around the HTML element of your page.
There is a fundamental diference between the two tags however:

• Margin creates white space outside the element;
• Padding creates white space inside the element.
  

This means that margin will create the white space outside the border element and background (see example below).

CSS Margin usage

You can use margin and padding in the following way:
padding-left: 3px;

CSS Padding usage

margin-right: 2pt;

But you can also combine the 4 margin/padding options:
margin: 2px 0 3px 5px;
padding: 3px 4px 5px 6px;

Where the 4 numbers stand for 'top, right, bottom, left'.

Values

You can use fixed numbers (px, pt, em, etc) or % if you want to use a percentage of the html element.

It is also possible to use negative values.

Examples

<div style="background: red; margin: 6px;">This is a box with a margin of 6 pixels.</div>

<div style="background: red; padding: 6px;">This is a box with a padding of 6 pixels.</div>

Summary

Use css margin and css padding to create space around the html elements on your page. Padding will create space -inside- an element and margin -outside- the element.

Tags: (CSS Margin | CSS Padding)

• Twitter: CSS Margin and padding
• Stumbleupon
• Google
• Linked In