CSS Padding

Padding is the space between the contents of an element and its border. CSS Padding Properties are used to manage and define this space to make the contents readable and visually comfortable. CSS Padding is defined in length or %age the element containing the element whose padding is being defined.

CSS Padding properties are PADDING, PADDING-TOP, PADDING-LEFT, PADDING-RIGHT and PADDING-BOTTOM. The allowed values for these properties are number as pixel (e.g. 10px) and number as percentage (e.g. 10%). 

Using CSS Padding

While defining the padding of an element keep these things in mind

  • Since padding values are the spaces between element content and its borders, it cannot be negative. Always provide positive value with px or %.
  • Padding is always with reference to the container element’s border.
  • Padding for all the four sides of the HTML element can be set using PADDING. If you need to set padding for individual sides you can use the required properties from PADDING-TOP, PADDING-LEFT, PADDING-RIGHT and PADDING-BOTTOM.
  • CSS PADDING property is a composite statement to set padding values for all sides. These values can be specified with PADDING for the sides in the order of top, right, bottom and left sides.
  • If only one value is given with PADDING property, it is taken as padding value for all sides.
  • If two values are given in the PADDING property, the first value is taken as padding value for top and bottom sides. The second value is applied as padding values for left and right sides.
  • If three values are given in the PADDING property, the first value is taken as padding for top side. The second value is applied as padding value for right and left sides and the third value is applied as padding values bottom side.

Example

<HTML>
<BODY>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING:40px">Using Padding with one value applied to all sides</H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING:3%">Using Padding with one value applied to all sides</H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING-LEFT:40px">Using Padding with left value</H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING-RIGHT:40px">Using Padding with right value</H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING-TOP:40px">Using Padding with top value</H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING-BOTTOM:40px">Using Padding with bottom value</H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING:40px 30px">Using Padding with two value </H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING:40px 30px 50px">Using Padding with three value </H4>
<H4 STYLE="BORDER-STYLE:SOLID; PADDING:2px 40px 60px 80px;">Using Padding with all value </H4>
</BODY>
</HTML>
CSS Padding