CSS Padding

Padding is the space inside an element, between its content and its border. While margin pushes elements away from each other on the outside, padding pushes the content away from the element's own edges on the inside.

Think of it like a picture frame — the painting (content) is surrounded by a mat board (padding) before reaching the frame (border).

Padding inherits the element's background color — it does not appear empty like margin does.

Individual Side Properties

Padding can be set individually for each side.

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

Shorthand padding Property

Like margin, all four padding sides can be written on one line. The same shorthand rules apply.

One Value — All Four Sides Equal

div {
    padding: 20px;
}

Two Values — Top/Bottom and Left/Right

div {
    padding: 15px 30px;
    /* Top and Bottom = 15px */
    /* Left and Right = 30px */
}

Three Values — Top, Left/Right, Bottom

div {
    padding: 10px 20px 40px;
    /* Top = 10px, Left/Right = 20px, Bottom = 40px */
}

Four Values — Top, Right, Bottom, Left

div {
    padding: 10px 20px 30px 40px;
    /* Top = 10px, Right = 20px, Bottom = 30px, Left = 40px */
}

Padding Example

.button {
    background-color: #3498db;
    color: white;
    padding: 12px 28px;   /* 12px top/bottom, 28px left/right */
    border-radius: 5px;
}

This gives the button's text comfortable spacing on all sides, making it look like a proper clickable button rather than text squished against an edge.

Padding Affects Element Width

By default, when padding is added to an element, it increases the element's total width and height. This can be confusing when trying to keep elements at a specific size.

Example

div {
    width: 200px;
    padding: 20px;
    /* Actual rendered width = 200px + 20px left + 20px right = 240px */
}

To prevent padding from adding to the element's size, the box-sizing: border-box property is used. This is covered in detail in the Box Model topic.

div {
    box-sizing: border-box;
    width: 200px;
    padding: 20px;
    /* Actual rendered width stays at 200px — padding fits inside */
}

Padding vs Margin — Key Differences

Full Practical Example

.card {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 24px;         /* Internal breathing room */
    margin: 20px auto;     /* External space + centering */
    width: 500px;
    box-sizing: border-box;
}

This creates a clean card component with comfortable internal spacing and external separation from surrounding elements.

Summary

Padding creates space inside an element between its content and border. It shares the background color of the element and does not collapse. Like margin, it uses the same 1, 2, 3, or 4 value shorthand pattern. Adding box-sizing: border-box prevents padding from increasing an element's total size — a best practice in modern CSS development.