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.
Particularly when the display's width is very small, padding will ensure that whitespace on the top, bottom and sides keeps the text block readable.

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 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; }
.emw3class { padding: 1.5rem; }
#emw3id { padding: 2px 50px 10px 75px; }

Try it:

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