HTML
JAVASCRIPT
CSS
PYTHON

CSS Padding

What is CSS Padding?

CSS padding is a property used to create space between an element's content and its border. It is part of the box model, which includes content, padding, border, and margin. Padding is internal spacing, whereas margin refers to external spacing.

Key Points About Padding

  • Adds Space Within the Element: Padding creates space inside the element, between the content and the border.
  • Adjustable on All Sides: You can set padding individually for top, right, bottom, and left sides, or apply uniform padding to all sides.
  • Accepts Different Units: Padding values can be defined in various units like pixels (px), percentages (%), em, rem, etc.
  • Responsive Design: Using percentage or relative units makes padding responsive.

Syntax

  padding: value; /* Applies uniform padding to all sides */
  padding-top: value;
  padding-right: value;
  padding-bottom: value;
  padding-left: value;

Shorthand Property

  padding: top right bottom left;
  • padding: 10px 20px 30px 40px;
    • Top: 10px
    • Right: 20px
    • Bottom: 30px
    • Left: 40px

Examples

1. Uniform Padding

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  .box {
    padding: 20px;
    background-color: lightblue;
    border: 2px solid darkblue;
  }
  </style>
  </head>
  <body>
  <div class="box">This is a box with uniform padding.</div>
  </body>
  </html>

Output: The text inside the box has a 20px space from all sides to the border.

2. Individual Side Padding

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  .box {
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 20px;
    padding-left: 25px;
    background-color: lightgreen;
    border: 2px solid darkgreen;
  }
  </style>
  </head>
  <body>
  <div class="box">This box has padding set individually for each side.</div>
  </body>
  </html>

Output:

  • Top padding: 10px
  • Right padding: 15px
  • Bottom padding: 20px
  • Left padding: 25px

3. Using Percentage for Padding

  <!DOCTYPE html>
  <html>
  <head>
  <style>
  .container {
    width: 50%;
    background-color: lightcoral;
  }
  .box {
    padding: 10%;
    background-color: white;
  }
  </style>
  </head>
  <body>
  <div class="container">
    <div class="box">Padding is 10% of the container width.</div>
  </div>
  </body>
  </html>

Output: The padding adjusts based on the container's width.

Tips for Using CSS Padding

  • Avoid Negative Values: Padding values cannot be negative.
  • Responsive Design: Use percentages or relative units for better responsiveness.
  • Use box-sizing: The box-sizing: border-box; rule ensures padding is included in the element's width and height, preventing layout issues.

Common Use Cases

  • Adding breathing space around text.
  • Creating consistent spacing in buttons.
  • Enhancing layout design for visual appeal.

By understanding and applying padding effectively, you can create visually appealing, user-friendly designs that adapt well across different devices.

Previous Next