CSS padding-bottom attribute

Definition and Usage

The paddingBottom property sets the bottom inner padding (bottom space) of the element.

Description

This property sets the width of the element's bottom inner padding. The bottom inner padding set on inline non-replaced elements does not affect line height calculation, so an element that has both padding and background may visually extend to other lines and may even overlap with other content. Negative padding values are not allowed to be specified.

Note:Negative values are not allowed.

See Also:

CSS Tutorial:CSS inner padding

HTML DOM Reference Manual:paddingBottom Property

Example

Set the bottom inner padding of the p element:

p
  {
  padding-bottom:2cm;
  }

Try It Yourself

(More examples can be found at the bottom of the page)

CSS Syntax

padding-bottom: length|initial|inherit;

Property Value

Value Description
length Specifies a fixed bottom inner padding value in specific units, such as pixels, centimeters, etc. The default value is 0px.
% Defines a percentage bottom inner padding based on the parent element's width. This value may not work as expected in all browsers.
inherit Specifies that the bottom inner padding should be inherited from the parent element.

Technical Details

Default Value: 0
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.paddingBottom="10px"

Try It Yourself Example

Set bottom inner padding 1
This example demonstrates how to set the bottom inner padding of a cell using centimeter values.
Set bottom inner padding 2
This example demonstrates how to set the bottom inner padding of a cell using percentage values.

Browser Support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5