The padding shorthand Property in CSS


The padding property in CSS allows you to set the padding for padding-top, padding-right, padding-bottom, padding-left. It is a shorthand property.

For example

padding:10px 5px 7px 10px;

Here,

  • top padding is 10px

  • right padding is 5px

  • bottom padding is 7px

  • left padding is 10px

Syntax

The syntax of CSS padding property is as follows −

Selector {
   padding: /*value*/
}

The value can be −

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left

The following examples illustrate CSS padding shorthand property −

Padding property with all the values

The padding property with all the values sets values for the top, right, bottom, and left properties −

padding: 35px 70px 50px 40px;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      p.demo {
         border: 2px solid blue; 
         padding: 35px 70px 50px 40px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is a demo text.</p>
   <p class="demo">This is another demo text.</p>
   <p>Another demo text</p>
   <h2>Demo Heading2</h2>
   <p>Demo text</p>
</body>
</html>

Padding property with three values

The padding property with three values. The top padding is 35px. The left and right properties are 70px. The bottom padding is 50px −

padding: 35px 70px 50px;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      p.demo {
         border: 2px solid blue; 
         padding: 35px 70px 50px;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is a demo text.</p>
   <p class="demo">This is another demo text.</p>
   <p>Another demo text</p>
   <h2>Demo Heading2</h2>
   <p>Demo text</p>
</body>
</html>

Padding property with two values

The padding property with two values i.e., the top and bottom margins are 2em. The left and right properties are 3em −

padding: 2em 3em;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         height: 150px;
         width: 300px;
         padding: 5% 10% 20% 5%;
         background-image: url("https://www.tutorialspoint.com/images/home_tensor_flow.png");
         text-align: center;
         font-weight: bold;
         font-size: 1.2em;
         box-sizing: border-box;
      }
      div > div {
         border-radius: 80px;
         padding: 2em 3em;
         box-shadow: 0 0 4px 0.8px black;
      }
   </style>
</head>
<body>
   <div>Learn TensorFlow
      <div>TensorFlow is an open source machine learning framework for all developers.</div>
   </div>
</body>
</html>

Padding property with a single value

The padding property with a single value i.e., all the padding properties are set to 2em −

padding: 2em;

Example

Let us see the example −

<!DOCTYPE html>
<html>
<head>
   <style>
      div {
         height: 150px;
         width: 100px;
         padding: 5% 1%;
         background-color: papayawhip;
         border-radius: 5%;
         box-sizing: border-box;
      }
      div > div {
         width: 50px;
         height: 50px;
         border-radius: 50%;
         padding: 2em;
         box-shadow: 0 0 9px 1px black;
      }
      span {
         padding: 10px;
      }
   </style>
</head>
<body>
   <div>
      <div></div>
      <span><i>button</i></span>
   </div>
</body>
</html>

Updated on: 02-Jan-2024

123 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements