padding

value: <padding-width>{1,4} | inherit
initial value: see individual properties for each element
inherited: no
percentages: refer to the size of the containg block
applicable to: all elements (except certain table elements)

 The property of padding is a shorthand property for the following:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

The values for the padding property

The padding property can have from 1 to 4 values. The value(s) can be in pixels, em, or in a percentage. If one value is states, it is applied to each side of the element. If two values are stated, the first is padding-top and padding-bottom, the second is padding-left and padding-right. If four values are stated, the oder is padding-top, padding-right, padding-bottom then padding-left.

Example:

a.speciallink {padding: 5px 3px;}
img.oldphoto {padding: 12px;}
div#innerbox {padding: 20%;}

The default values for padding of HTML elements

Each browser, Internet Explorer, Firefox, Safari, and Opera, assigns different padding to different elements by default. This amount of padding my vary for different HTML elements and differ from browser to browser. This is why cross-broser testing is important to be sure that your web page looks the same in each of the browsers. Many developers will use a reset.css or standardize.css style sheet to bring all the browsers to the same starting point as far as padding and margins. As well as having different padding and margins, the different browsers will act differently when combining the padding or margins between to adjacent elements.

Visit the article: CSS Topics: Level the playing field between browsers to find out more about these style sheets.