CSS padding-bottom Property

February 10, 2021 12:37 pm IST

You are Here:

CSS padding-bottom Property

CSS padding-bottom property sets the bottom padding (space) between its content and its border.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid black; width: 200px; padding-bottom: 50px; } </style> </head> <body> <h1>CSS padding-bottom Property</h1> <div> This div has 50px bottom space for its content. </div> </body> </html>

Run

Syntax

Using CSS

element{ padding-bottom: 25px; }

Using Javascript

object.style.paddingBottom="25px";

Animatable

Yes, padding-bottom property is animatable. CSS Animatable Properties Reference.

Default Value

Default value for CSS padding-bottom property is 0.

Property Value

The following table provides a list of values for CSS padding-bottom property.

Value	Explanation
length	Allows you to define the padding-bottom of the element in any CSS length unit. Must be nonnegative.
%	Allows you to define the padding-bottom of the element in % of the width of the containing block. Must be nonnegative.

Using Percentage

In the following example, we will use percentage value to set padding-bottom for an element (div).

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid black; width: 200px; padding-bottom: 5%; } </style> </head> <body> <h1>CSS padding-bottom Property</h1> <div> This div has 5% bottom space for its content. </div> </body> </html>

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS padding-bottom property of an element using JavaScript.

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid black; width: 200px; margin-bottom: 20px; } </style> </head> <body> <h1>CSS padding-bottom Property</h1> <div>This is div.</div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.paddingBottom = "50px"; } </script> </body> </html>

Run