CSS Padding

The padding property in CSS is used to create space between the content of an element and its border. It defines the inner spacing of an element, improving the layout and design by controlling how the content is visually positioned within the element.

Syntax

selector {
  padding: value; /* Shorthand for all sides */
}

Try It Now

You can also specify padding for each side individually:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Values

  1. Length: A specific value such as px, em, rem, %, etc.
    Example: padding: 20px;
  2. Percentage: A percentage of the element’s width.
    Example: padding: 10%;
  3. Auto: Not valid for padding.
  4. Shorthand:
    • padding: 10px; (applies to all sides)
    • padding: 10px 20px; (top-bottom, left-right)
    • padding: 10px 15px 20px; (top, left-right, bottom)
    • padding: 10px 15px 20px 25px; (top, right, bottom, left)

Examples

1. Uniform Padding

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightblue;
      padding: 20px; /* 20px padding on all sides */
      border: 2px solid blue;
    }
  </style>
</head>
<body>
  <div class="box">This is a box with padding.</div>
</body>
</html>

Try It Now

2. Different Padding Values

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      padding: 10px 15px 20px 25px; /* top, right, bottom, left */
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <div class="box">Content with different padding values.</div>
</body>
</html>

Try It Now

3. Percentage Padding

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .box {
      width: 50%;
      background-color: lightgreen;
      padding: 10%; /* 10% of the element's width */
      border: 2px solid green;
    }
  </style>
</head>
<body>
  <div class="box">Percentage-based padding.</div>
</body>
</html>

Try It Now

Individual Side Padding

Example

.box {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 20px;
  padding-left: 25px;
}

Try It Now

Padding and Box Model

Default Box Model

By default, the width and height of an element include only the content. Padding, border, and margin are added outside the content box.

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 5px solid black;
}

Try It Now

  • Total width = 200px (content) + 20px (padding-left) + 20px (padding-right) + 5px (border-left) + 5px (border-right) = 250px
  • Total height = 100px (content) + 20px (padding-top) + 20px (padding-bottom) + 5px (border-top) + 5px (border-bottom) = 150px

Using box-sizing

To include padding and border in the element’s specified width and height, use:

.box {
  box-sizing: border-box;
}

Try It Now

Padding vs Margin

Feature Padding Margin
Position Space inside the element, around content Space outside the element, around the element itself
Background Background color applies to padding area Background color does not apply to margin
Box Model Included in the inner spacing Added outside the element’s box

Browser Support

The padding property is supported by all modern browsers.

Best Practices

  1. Use shorthand padding for cleaner and concise code when values are uniform or symmetrical.
  2. Use box-sizing: border-box for predictable layouts.
  3. Combine padding with margin and border for a balanced design.

Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
  <style>
    .container {
      width: 300px;
      height: 200px;
      background-color: lightgray;
      border: 2px solid black;
      padding: 20px; /* Inner spacing */
      box-sizing: border-box; /* Includes padding and border in total width/height */
    }

    .content {
      background-color: lightblue;
      padding: 10px; /* Inner spacing of nested element */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">Nested content with padding.</div>
  </div>
</body>
</html>

Try It Now

This example demonstrates how padding is applied to both the parent and child elements. Experiment with different values to see how padding affects layout and spacing!