HTML CSS – Padding Examples

0

Few examples demonstrating how to use CSS padding with different properties. Padding is the space between the content of an element and its border. By adjusting the padding, you can control the spacing inside an element.

Example 1: Basic Padding

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Padding Example</title>
    <style>
        .basic-padding {
            width: 300px;
            padding: 20px; /* Adds padding of 20px on all sides */
            border: 2px solid #3498db;
            background-color: #ecf0f1;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="basic-padding">
        <h3>Basic Padding Example</h3>
        <p>This div has 20px padding on all sides, creating space between the content and the border.</p>
    </div>
</body>
</html>

Output:

  • A box with 20px padding on all sides, creating space between the content and the blue border.

Example 2: Different Padding for Each Side

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Different Padding for Each Side</title>
    <style>
        .custom-padding {
            width: 300px;
            height: 150px;
            padding: 10px 20px 30px 40px; /* Top, Right, Bottom, Left */
            border: 2px dashed #e74c3c;
            background-color: #f9f9f9;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="custom-padding">
        <h3>Custom Padding Example</h3>
        <p>This div has different padding values on each side: 10px top, 20px right, 30px bottom, and 40px left.</p>
    </div>
</body>
</html>

Output:

  • The div has different padding on each side: 10px on the top, 20px on the right, 30px on the bottom, and 40px on the left.

Example 3: Padding with Background Color

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding with Background Color</title>
    <style>
        .padded-background {
            width: 300px;
            padding: 30px;
            background-color: #3498db; /* Blue background color */
            color: white;
            border-radius: 10px;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="padded-background">
        <h3>Padding with Background</h3>
        <p>This div has padding around the content, and the background color fills the padded area.</p>
    </div>
</body>
</html>

Output:

  • A box with 30px padding around the content, and a blue background that fills the entire padded area.

Example 4: Padding and Content Alignment

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding and Content Alignment</title>
    <style>
        .align-padding {
            width: 300px;
            height: 200px;
            padding: 40px;
            background-color: #f39c12;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            border: 3px solid #e67e22;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="align-padding">
        <p>This content is centered inside the div using padding and flexbox.</p>
    </div>
</body>
</html>

Output:

  • A box with 40px padding on all sides, and the content inside it is centered both horizontally and vertically using flexbox properties. The orange background fills the padded area.

Example 5: Padding with Inline Elements

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding with Inline Elements</title>
    <style>
        .inline-padding {
            border: 2px solid #8e44ad;
            padding: 10px 20px;
            display: inline-block; /* Makes the element inline */
            background-color: #ecf0f1;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="inline-padding">
        <h3>Padding with Inline Elements</h3>
        <p>This div is an inline-block element, and it has padding applied to its content.</p>
    </div>
</body>
</html>

Output:

  • The div behaves like an inline element, with padding applied around the content and a purple border.

Example 6: Padding for Buttons

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Padding on Buttons</title>
    <style>
        .button-padding {
            padding: 15px 30px; /* 15px top/bottom, 30px left/right */
            background-color: #27ae60;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 18px;
            cursor: pointer;
        }

        .button-padding:hover {
            background-color: #2ecc71;
        }
    </style>
</head>
<body>
    <button class="button-padding">Click Me</button>
</body>
</html>

Output:

  • A button with 15px top/bottom and 30px left/right padding, making the button larger and more clickable. It changes color when hovered over.

Example 7: Large Padding on One Side

HTML File (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Large Padding on One Side</title>
    <style>
        .large-padding-one-side {
            width: 300px;
            height: 150px;
            padding-top: 50px; /* Large padding on top */
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            background-color: #9b59b6;
            color: white;
            border: 2px solid #8e44ad;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div class="large-padding-one-side">
        <h3>Large Padding on One Side</h3>
        <p>This div has 50px padding at the top, making it appear as if the content is pushed down.</p>
    </div>
</body>
</html>

Output:

  • The div has 50px padding on top, creating extra space above the content, while the other sides have 20px padding.

Summary of Padding in CSS:

  • padding: Adds space inside an element between its content and its border.
  • padding-top, padding-right, padding-bottom, padding-left: Used for individual sides of an element (top, right, bottom, left).
  • Shorthand: You can specify one value for all sides, two values (top/bottom and left/right), three values (top, left/right, bottom), or four values (top, right, bottom, left).
  • Inline elements: Padding also works with inline elements like buttons, but padding will increase the size of the element.

Padding plays a key role in adjusting the layout of content inside elements.