Comparison between CSS Padding and CSS margin Properties

Author: satz | Date: June 1, 2009

CSS Padding Properties:

The CSS padding properties define the space between the element border and the element content. Remember, Negative values are not allowed while specifying padding values.

The possible usages are as follows (sample values are given):

Padding: 10px 20px 30px 20px; [top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 20px.] The values are in the clock vise order, starting from top.

 Padding-top: 10px;
 Padding-right: 20px;
 Padding-bottom: 30px;
 Padding-left: 20px;

CSS Margin Properties:

The CSS margin properties define the space around elements. Negative values are allowed, but the contents may be overlapped.

The Possible usages are as follows (sample values are given):

Margin: 10px 20px 30px 20px; [top margin is 10px, right margin is 20px. Bottom margin is 30px and left margin is 20px] the values are in the clock vise order, starting from top.

Margin-top: 10px;
Margin-right: 20px;
Margin-bottom: 30px;
Margin-left: 20px;

Both are recommended for CSS1 standard by W3C. Both have compatibility on most of the popular browsers like, Internet Explorer, Firefox, etc. Both properties are used quiet frequently in CSS based layouts.