Prev Next

CSS Padding

Padding is the space inside an element’s border, surrounding its content. Increasing padding gives elements breathing room, improving readability and aesthetics. Like margins, you can control each side independently or apply a uniform padding to all sides.

Key Topics

Setting Padding

Use padding to add space between content and its border. For example, padding: 20px; sets 20px on all sides.

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding Example</title>
    <style>
        .container {
            border: 2px solid #333;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Element with Padding</h2>
        <p>There is 20px of space between this text and the border.</p>
    </div>
</body>
</html>

Explanation: Padding provides a comfortable area around the content, making it easier to read and visually appealing.

Individual Sides

Like margins, you can use padding-top, padding-right, padding-bottom, and padding-left for granular control. Adjusting individual sides can balance text placement or accommodate unique designs.

Influence on Layout

Unlike margins, padding affects the element’s total size. Adding more padding increases the element’s overall width and height, which can impact responsive layouts.

Key Takeaways

  • Inside Space: Padding is inside the border, separating content from edges.
  • Flexible Control: Set uniform or individual padding values per side.
  • Size Impact: Padding affects the element’s total dimensions.
  • Readability: Proper padding improves visual clarity and user experience.
Prev Next