❮ Previous Next ❯

CSS Padding

  • Learn CSS padding to add spacing inside elements and control layout using box model properties.

  • What Is Padding in CSS ?

    In CSS, padding is the space inside an element, between the content and the border.

    In simple words:
    Padding = inner breathing space of an element 

    Padding pushes content away from the border, making elements look neat, readable, and user-friendly.

    Real-Life Example

    Think of a gift box 

    • Gift inside → Content

    • Bubble wrap / cushion → Padding

    Without padding, the gift would touch the box walls and could get damaged.

    Padding in the CSS Box Model

    The Box Model order is:

    Content → Padding → Border → Margin

    • Padding → space inside the element

    • Margin → space outside the element

    Padding is always inside the border.

    Why Is Padding Important ?

    Padding helps to :

    Improve readability
     Make buttons & links comfortable to click
     Improve visual design
     Prevent content from touching borders

    Without padding

    Text looks cramped
     Buttons feel hard to click
     UI looks unprofessional

    Key Concepts of CSS Padding

    Padding Increases Clickable Area (VERY IMPORTANT)

    Padding makes buttons and links easier to click.

Importance of Padding in CSS

Padding adds space inside an element, increasing the clickable area and improving user experience. 

/* Bad Button */
.bad-btn {
	padding: 0;
	margin-right: 20px;
}

/* Good Button */
.good-btn {
	padding: 10px 20px;
}

  • Real-Life Example
    Big elevator buttons are easier to press than tiny ones.

    Padding Affects Background Visibility

    The background color or image extends into the padding area.

    Padding becomes part of the visible background.

Padding and Background Area

Padding becomes part of the element’s background area, meaning the background color extends into the padded space. 

.box {
  background-color: lightblue;
  padding: 20px;
}

  • Background fills content + padding
    Element looks spacious

    Real-Life Example
    Painting a room including empty space around furniture

    Padding Does NOT Collapse (Important Difference)

    Unlike margins, padding never collapses.

    Top + bottom padding always add up
    Left + right padding always add up

Padding Does Not Collapse

Unlike margins, padding never collapses. Vertical and horizontal padding always add together. 

.box {
  padding-top: 20px;
  padding-bottom: 20px;
}
  • Total vertical padding = 40px

    Padding Properties

    Padding can be controlled in multiple ways.

Individual Padding Properties

You can set padding separately for each side (top, right, bottom, left) to control inner spacing precisely. 

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

  • Padding Shorthand (VERY IMPORTANT)

    All sides

    padding: 20px;

    Vertical | Horizontal

    padding: 10px 20px;

    Top | Horizontal | Bottom

    padding: 10px 20px 30px;

    Top | Right | Bottom | Left (Clockwise)

    padding: 10px 15px 20px 25px;

    Padding vs Margin (Quick Comparison)

    PaddingMargin
    Space inside elementSpace outside element
    Increases clickable areaDoes NOT increase clickable area
    Affects backgroundDoes NOT affect background
    Cannot be negativeCan be negative
    Does NOT collapseVertical margins collapse
    Padding with Width & Box-Sizing

    Important Rule:
    By default, padding adds to the element’s size.

    .box {

      width: 200px;

      padding: 20px;

    }

    Total width becomes 240px

    Best Practice (Recommended)

    * {

      box-sizing: border-box;

    }

    Padding stays inside the width
    Layout becomes predictable

    Real-Life Example
    A fixed-size suitcase where everything must fit inside

Padding Practical Example

This example shows how padding adds inner spacing inside a card and button, improving layout and readability. 

<!DOCTYPE html>
<html>
<head>
    <title>Padding Practical Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 40px;
        }

        .card {
            width: 250px;
            border: 2px solid #333;
            padding: 20px;
            background-color: #f4f4f4;
        }

        button {
            padding: 10px 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="card">
        <h3>Product</h3>
        <p>This card uses padding properly.</p>
        <button>Buy Now</button>
    </div>
</body>
</html>

  • What Happens ?

    Content doesn’t touch borders
    Button is easy to click
    Layout looks clean & professional

    Common Mistakes

    Confusing padding with margin
    Forgetting padding increases element size
    Using zero padding in buttons
    Ignoring box-sizing

    Best Practices for Using Padding

    Use padding for inner spacing
    Use margin for outer spacing
    Always add padding to buttons & links
    Keep padding consistent
    Use box-sizing: border-box

    Padding = Comfort space 

    • No padding → cramped UI 

    • Too much padding → wasted space 

    • Balanced padding → professional design

      Padding creates space inside elements
      Increases clickable area
      Affects background visibility
      Does NOT collapse
      Essential for great UI & UX

    ❮ Previous Next ❯