Skip to content
Related Articles

Related Articles

How to apply CSS Padding Shorthand Property ?
  • Difficulty Level : Expert
  • Last Updated : 17 Mar, 2021

Padding is the space between the element and its border. The shorthand property of padding sets the padding area in all four sides of the element. The padding value can be in px, em, rem or %. If we want to apply padding on a specific side we can use the following properties:

Syntax: 

padding: value;

Different Vertical and Horizontal padding:

padding: value1 value2;
  1.  value1: Sets the padding value on the top and bottom sides of the element.
  2.  value2: Sets the padding value on the right and left sides of the element.
     

Different top, horizontal, and bottom padding:

padding: value1 value2 value3;
  1. value1: Sets padding on the top side of the element.
  2. value2: Sets padding on the right and the left side of the element.
  3. value3: Sets padding on the bottom side of the element.
     

Different padding on all four sides:



padding: value1 value2 value3 value4;
  1. value1: Sets padding on the top side of the element.
  2. value2: Sets padding on the right side of the element.
  3. value3: Sets padding on the bottom side of the element.
  4. value4: Sets padding on the left side of the element.

Example 1: padding with only 1 value 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        h1{
            width: fit-content;
            border: 4px solid #308D46;
            color: #308D46;
            padding: 20px;
        }
    </style>
  
</head>
<body>
   <h1> GeeksforGeeks</h1>
</body>
</html>

Output:

Example 2: Padding with two values

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        h1{
            width: fit-content;
            border: 4px solid #308D46;
            color: #308D46;
            padding: 5px 40px;
        }
    </style>
  
</head>
<body>
   <h1> GeeksforGeeks</h1>
</body>
</html>

Output:

Example 3: Padding with three values

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <style>
        h1{
            width: fit-content;
            border: 4px solid #308D46;
            color: #308D46;
            padding: 5px 40px 30px;
        }
    </style>
</head>
<body>
   <h1> GeeksforGeeks</h1>
</body>
</html>

Output:

Example 4: Padding with four values
 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <style>
        h1{
            width: fit-content;
            border: 4px solid #308D46;
            color: #308D46;
            padding: 15px 40px 45px 5px;
        }
    </style>
  
</head>
<body>
   <h1> GeeksforGeeks</h1>
</body>
</html>

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :