padding property


The padding property allows you to specify how much space should appear between the content of an element and its border:


td {padding:5px;}


The value of this property is most often specified in pixels, although it can use any of the units of length we met earlier, a percentage, or the word inherit .


The padding of an element will not inherit by default, so if the <body> element has a padding property with a value of 50 pixels, this will not automatically apply to all other elements inside it. If the value inherit is applied to any elements, only then will they have the same padding as their parent elements.


If a percentage is used, the percentage is of the containing box, and if the value of 10 percent is specified, there would be 5 percent of each side of the box as padding.


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

The padding attribute is especially helpful in creating white space between the content of an element and any border it has.


	      	.a, .b {border-style:solid;
			border-color:#000000;
			border-width:2px;
			width:100px;}
			.b {padding:5px;}