CSS padding-bottom Property


An element’s padding is the space between its content and its border. The padding-bottom CSS property is used to set the height of the padding area on the bottom of an element.

The padding-bottom property is used to specify the width of the bottom area of the element’s padding box. That is, it specifies the area of space required at the bottom of the element’s content, inside any defined border.

Every element on a web page is rectangular. Each element has a rectangular box model, which describes each of the rectangular boxes (areas) generated for the element: the content box, the padding box, the border box, and the margin box. The content box exists for every element. The padding, border, and margin boxes are optional, and their existence depends on whether you apply a padding, border, or margin to an element.

CSS Syntax

padding-bottom: length|initial|inherit;

Supported Browsers: The browser supported by property are listed below:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example -