CSS padding Property

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>

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.

ValueExplanation
lengthAllows 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>

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>

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>

Reminder

Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.

We are working to cover every Single Concept in CSS.

Please do google search for:

Join Our Channel

Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.

This channel is primarily useful for Full Stack Web Developer.

Share this Page

Meet the Author