CSS padding Property

February 10, 2021 12:37 pm IST

You are Here:

CSS padding Property

CSS padding property sets the padding area on all four sides of an element.

Example

HTML Online Editor

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

Run

Syntax

Using CSS

element{ padding: 300px; }

Using Javascript

object.style.padding="300px";

Animatable

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

Default Value

Default value for CSS padding property is 0.

Property Value

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

Value	Explanation
length	Allows you to define the padding of the element in any CSS length unit. Must be nonnegative.
%	Allows you to define the padding 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 for an element (div).

Example

HTML Online Editor

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

Run

Using JavaScript

In the following example, we will demonstrate how to change the CSS padding 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 Property</h1> <div>This is div.</div> <button onclick="myFunction()">Click Me</button> <script> var x = document.getElementsByTagName("div")[0]; function myFunction(){ x.style.padding = "50px"; } </script> </body> </html>

Run

CSS padding is a shorthand CSS Property

The padding is a shorthand CSS Property of the following CSS properties.

The padding CSS property can have one, two, three, or four values.

padding: 50px
- all four padding are 50px
padding: 50px 25px
- top and bottom padding are 50px
- right and left padding are 25px
padding: 50px 25px 10px
- top padding is 50px
- right and left padding are 25px
- bottom padding is 10px
padding: 50px 25px 10px 5px
- top padding is 50px
- right padding is 25px
- bottom padding is 10px
- left padding is 5px

Example

HTML Online Editor

<!DOCTYPE html> <html lang="en-US"> <head> <style> div{ border: 1px solid black; width: 200px; } div:nth-child(3){ padding: 50px; } div:nth-child(5){ padding: 50px 25px; } div:nth-child(7){ padding: 50px 25px 10px; } div:nth-child(9){ padding: 50px 25px 10px 5px; } </style> </head> <body> <h1>CSS padding Property</h1> <h2>padding: 50px;</h2> <div> all four padding are 50px. </div> <h2>padding: 50px 25px;</h2> <div> top and bottom padding are 50px, right and left padding are 25px. </div> <h2>padding: 50px 25px 10px;</h2> <div> top padding is 50px, right and left padding are 25px, bottom padding is 10px. </div> <h2>padding: 50px 25px 10px 5px;</h2> <div> top padding is 50px, right padding is 25px, bottom padding is 10px, left padding is 5px. </div> </body> </html>

Run