Padding

Shorthand to set the top, right, bottom and left padding properties in px, pt, %, em, etc. Padding is on the inside of the box model while margins are on the outside. Use padding to move the contents away from the edges of the block.

element { padding: TopPadding RightPadding BottomPadding LeftPadding ;}

element { padding: TopPadding  Right&LeftPadding  BottomPadding ;}

element { padding: Top&BottomPadding  Right&LeftPadding ;}

element { padding: Padding;}

Alternatively you can choose to inherit from a parent element: padding: inherit ;

This shorthand is equivalent to the following:

element {
  padding-top length;
  padding-right: length;
  padding-bottom: length;
  padding-left: length;
}

The default padding is 0.
If your stylesheets contains many padding:0 definitions then it may be time to consider using a CSS reset, even a simple body {margin 0; padding: 0;}

padding is equivalent to the old cellpadding property.

Examples:
h1 { padding: 5px; }
.ss64class { padding: 2px 5px; }

#SS64id { padding: 2px 50px 10px 75px; }

Try it:

This is a sample of text with a CSS border. The padding on each side of an element can be styled together or separately using CSS.

Browser Support: All major browsers (CSS 1+)

“The world wonders” was a phrase used as security padding in an encrypted message sent during the Battle of Leyte Gulf on October 25, 1944”

Related:

padding-bottom - Bottom padding of an element.
padding-left - Left padding of an element.
padding-right - Right padding of an element.
padding-top - Top padding of an element.
padding properties - Mozilla.org


© Copyright SS64.com 1999-2014
Some rights reserved