CSS Padding

Learn how to use CSS padding to create space inside elements between content and borders for better layout control.

Padding is the space between an element's content and its border. It creates internal spacing inside an element, making content more readable and visually appealing.

Understanding Padding

Padding is part of the CSS box model:

Content - The actual content
Padding - Space around content (inside border)
Border - Line around padding
Margin - Space outside border

Padding Properties

Individual Sides

.element {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

Shorthand Property

/* All four sides */
.element {
  padding: 20px; /* top right bottom left */
}

/* Vertical and horizontal */
.element {
  padding: 20px 30px; /* top/bottom left/right */
}

/* Top, horizontal, bottom */
.element {
  padding: 10px 20px 30px; /* top left/right bottom */
}

/* All four sides individually */
.element {
  padding: 10px 20px 30px 40px; /* top right bottom left (clockwise) */
}

Values

Padding accepts various units:

.element {
  /* Pixels */
  padding: 20px;

  /* Ems (relative to font-size) */
  padding: 1.5em;

  /* Rems (relative to root font-size) */
  padding: 2rem;

  /* Percentage (relative to parent width) */
  padding: 5%;

  /* Mix of units */
  padding: 1rem 20px 1.5rem 30px;
}

Practical Examples

Card with Padding

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px; /* Space inside card */
        margin: 20px;
      }

      .card-no-padding {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        /* No padding - content touches border */
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h3>Card with Padding</h3>
      <p>This content has breathing room!</p>
    </div>

    <div class="card-no-padding">
      <h3>Card without Padding</h3>
      <p>This content is cramped!</p>
    </div>
  </body>
</html>

Button Padding

.button {
  padding: 12px 24px; /* Vertical 12px, horizontal 24px */
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-small {
  padding: 8px 16px;
}

.button-large {
  padding: 16px 32px;
}

Container with Different Padding

.container {
  padding: 40px 20px; /* More padding top/bottom */
  background-color: #f0f0f0;
}

@media (max-width: 768px) {
  .container {
    padding: 20px 10px; /* Less padding on mobile */
  }
}

Padding and Box-Sizing

By default, padding adds to an element's total width/height:

/* content-box (default) */
.box {
  width: 300px;
  padding: 20px;
  /* Actual width = 300 + 20 + 20 = 340px */
}

/* border-box (recommended) */
.box-border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  /* Actual width = 300px (padding included) */
}

Best Practice

Use box-sizing: border-box globally for easier calculations:

* {
  box-sizing: border-box;
}

Common Patterns

Consistent Padding

.section {
  padding: 60px 20px; /* Consistent vertical/horizontal rhythm */
}

.content {
  padding: 20px;
}

.card {
  padding: 1.5rem;
}

Responsive Padding

.hero {
  padding: 100px 20px;
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 15px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 10px;
  }
}

Unequal Padding

.sidebar {
  padding: 20px 15px; /* Less horizontal padding */
}

.article {
  padding: 40px 60px; /* More horizontal padding for readability */
}

.alert {
  padding: 15px 15px 15px 45px; /* Extra left padding for icon */
}

Padding with Inline Elements

Inline elements behave differently with padding:

/* Inline elements */
span {
  padding: 10px 20px; /* Horizontal works, vertical may overlap */
}

/* Better: Use inline-block */
.inline-element {
  display: inline-block;
  padding: 10px 20px; /* All padding respected */
}

Negative Padding

Important

Padding cannot be negative. Use negative margins instead for pulling elements.

Percentage Padding

Percentage padding is always calculated based on the parent's width (even for top/bottom):

.box {
  width: 400px;
}

.child {
  padding: 25%; /* 25% of 400px = 100px on all sides */
}

This property is useful for creating responsive aspect ratios. The "padding hack" technique uses bottom padding to maintain aspect ratios:

/* Creates a 16:9 aspect ratio container */
.aspect-ratio-16-9 {
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 * 100% = 0.5625 = 56.25% */
  position: relative;
}

/* Place content absolutely inside the container */
.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Padding vs Margin

When to use padding vs margin:

Use Padding for:

Space inside an element
Increasing clickable area
Keeping background color/border around content
Preventing content from touching edges

Use Margin for:

Space between elements
Centering elements
Pushing elements away from others

/* Padding - inside spacing */
.card {
  padding: 20px;
  background-color: white; /* Background extends to padding */
}

/* Margin - outside spacing */
.card {
  margin: 20px; /* Space between cards */
}

Best Practices

Padding Best Practices

Use consistent padding values across your design - Use relative units (em, rem) for scalability
Consider mobile devices - reduce padding for small screens - Use padding instead of margin for internal spacing - Remember box-sizing: border-box for predictable sizing - Use shorthand for cleaner code when appropriate - Test padding with different content amounts - Maintain visual rhythm with consistent padding ratios

Common Use Cases

Forms

input,
textarea {
  padding: 10px 15px;
  border: 1px solid #ddd;
}

.nav-link {
  padding: 10px 20px;
  text-decoration: none;
}

Content Sections

.section {
  padding: 80px 0; /* Vertical section spacing */
}

.container {
  padding: 0 20px; /* Horizontal content padding */
}

Lists

.list-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

Debugging Padding

Use browser DevTools to visualize padding:

Inspect an element
Look at the box model diagram
Green area shows padding
Adjust values in real-time

Understanding padding is essential for creating well-spaced, professional-looking layouts!

Padding is the space between an element's content and its border. It creates internal spacing inside an element, making content more readable and visually appealing.

Understanding Padding

Padding is part of the CSS box model:

Content - The actual content
Padding - Space around content (inside border)
Border - Line around padding
Margin - Space outside border

Padding Properties

Individual Sides

.element {
  padding-top: 20px;
  padding-right: 30px;
  padding-bottom: 20px;
  padding-left: 30px;
}

Shorthand Property

/* All four sides */
.element {
  padding: 20px; /* top right bottom left */
}

/* Vertical and horizontal */
.element {
  padding: 20px 30px; /* top/bottom left/right */
}

/* Top, horizontal, bottom */
.element {
  padding: 10px 20px 30px; /* top left/right bottom */
}

/* All four sides individually */
.element {
  padding: 10px 20px 30px 40px; /* top right bottom left (clockwise) */
}

Values

Padding accepts various units:

.element {
  /* Pixels */
  padding: 20px;

  /* Ems (relative to font-size) */
  padding: 1.5em;

  /* Rems (relative to root font-size) */
  padding: 2rem;

  /* Percentage (relative to parent width) */
  padding: 5%;

  /* Mix of units */
  padding: 1rem 20px 1.5rem 30px;
}

Practical Examples

Card with Padding

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px; /* Space inside card */
        margin: 20px;
      }

      .card-no-padding {
        background-color: white;
        border: 1px solid #ddd;
        border-radius: 8px;
        /* No padding - content touches border */
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="card">
      <h3>Card with Padding</h3>
      <p>This content has breathing room!</p>
    </div>

    <div class="card-no-padding">
      <h3>Card without Padding</h3>
      <p>This content is cramped!</p>
    </div>
  </body>
</html>

Button Padding

.button {
  padding: 12px 24px; /* Vertical 12px, horizontal 24px */
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button-small {
  padding: 8px 16px;
}

.button-large {
  padding: 16px 32px;
}

Container with Different Padding

.container {
  padding: 40px 20px; /* More padding top/bottom */
  background-color: #f0f0f0;
}

@media (max-width: 768px) {
  .container {
    padding: 20px 10px; /* Less padding on mobile */
  }
}

Padding and Box-Sizing

By default, padding adds to an element's total width/height:

/* content-box (default) */
.box {
  width: 300px;
  padding: 20px;
  /* Actual width = 300 + 20 + 20 = 340px */
}

/* border-box (recommended) */
.box-border-box {
  box-sizing: border-box;
  width: 300px;
  padding: 20px;
  /* Actual width = 300px (padding included) */
}

Best Practice

Use box-sizing: border-box globally for easier calculations:

* {
  box-sizing: border-box;
}

Common Patterns

Consistent Padding

.section {
  padding: 60px 20px; /* Consistent vertical/horizontal rhythm */
}

.content {
  padding: 20px;
}

.card {
  padding: 1.5rem;
}

Responsive Padding

.hero {
  padding: 100px 20px;
}

@media (max-width: 768px) {
  .hero {
    padding: 60px 15px;
  }
}

@media (max-width: 480px) {
  .hero {
    padding: 40px 10px;
  }
}

Unequal Padding

.sidebar {
  padding: 20px 15px; /* Less horizontal padding */
}

.article {
  padding: 40px 60px; /* More horizontal padding for readability */
}

.alert {
  padding: 15px 15px 15px 45px; /* Extra left padding for icon */
}

Padding with Inline Elements

Inline elements behave differently with padding:

/* Inline elements */
span {
  padding: 10px 20px; /* Horizontal works, vertical may overlap */
}

/* Better: Use inline-block */
.inline-element {
  display: inline-block;
  padding: 10px 20px; /* All padding respected */
}

Negative Padding

Important

Padding cannot be negative. Use negative margins instead for pulling elements.

Percentage Padding

Percentage padding is always calculated based on the parent's width (even for top/bottom):

.box {
  width: 400px;
}

.child {
  padding: 25%; /* 25% of 400px = 100px on all sides */
}

This property is useful for creating responsive aspect ratios. The "padding hack" technique uses bottom padding to maintain aspect ratios:

/* Creates a 16:9 aspect ratio container */
.aspect-ratio-16-9 {
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 * 100% = 0.5625 = 56.25% */
  position: relative;
}

/* Place content absolutely inside the container */
.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Padding vs Margin

When to use padding vs margin:

Use Padding for:

Space inside an element
Increasing clickable area
Keeping background color/border around content
Preventing content from touching edges

Use Margin for:

Space between elements
Centering elements
Pushing elements away from others

/* Padding - inside spacing */
.card {
  padding: 20px;
  background-color: white; /* Background extends to padding */
}

/* Margin - outside spacing */
.card {
  margin: 20px; /* Space between cards */
}

Best Practices

Padding Best Practices

Use consistent padding values across your design - Use relative units (em, rem) for scalability
Consider mobile devices - reduce padding for small screens - Use padding instead of margin for internal spacing - Remember box-sizing: border-box for predictable sizing - Use shorthand for cleaner code when appropriate - Test padding with different content amounts - Maintain visual rhythm with consistent padding ratios

Common Use Cases

Forms

input,
textarea {
  padding: 10px 15px;
  border: 1px solid #ddd;
}

.nav-link {
  padding: 10px 20px;
  text-decoration: none;
}

Content Sections

.section {
  padding: 80px 0; /* Vertical section spacing */
}

.container {
  padding: 0 20px; /* Horizontal content padding */
}

Lists

.list-item {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

Debugging Padding

Use browser DevTools to visualize padding:

Inspect an element
Look at the box model diagram
Green area shows padding
Adjust values in real-time

Understanding padding is essential for creating well-spaced, professional-looking layouts!

CSS Padding

On this page

CSS Padding

On this page