CSS Padding

❮ Previous Next ❯

CSS Padding: Spacing Inside Elements

The CSS padding property is used to create space between an element's content and its border. Unlike margins (which create space outside the border), padding only affects the space inside the element.

Padding vs. Margin: Margin is the space between adjacent element borders, while padding is the space between the content and the element's own border.
Padding takes on the background color of the element it is applied to.
Unlike margins, padding cannot have negative values.

Padding Property Values

Padding properties can accept the following types of values:

Length: Specifies a fixed padding in px, pt, cm, em, etc. (e.g., 20px).
Percentage (%): Specifies padding as a percentage of the containing element's width.
inherit: Inherits the padding value from the parent element.

Individual Side Padding Properties

CSS provides properties to specify padding for individual sides of an element. We can independently change the top, bottom, left, and right padding using the following properties:

Property	Description
`padding-top`	Sets the padding for the top side of the element.
`padding-right`	Sets the padding for the right side of the element.
`padding-bottom`	Sets the padding for the bottom side of the element.
`padding-left`	Sets the padding for the left side of the element.

Syntax:

.myDiv {    
    padding-top: 80px;    
    padding-right: 100px;    
    padding-bottom: 50px;    
    padding-left: 80px;
}

Individual Padding Example:

<!DOCTYPE html>
<html>
<head>
    <title>Padding Example</title>
    <style>
        .myDiv {
            background-color: lightblue;
            border: 2px solid navy;
            /* Applying padding to each side individually */
            padding-top: 40px;
            padding-right: 80px;
            padding-bottom: 20px;
            padding-left: 60px;
        }
        .inner-content {
            background-color: pink;
            border: 2px dashed red;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="inner-content">
            Content Box! Notice the uneven blue space around me.
        </div>
    </div>
</body>
</html>

Shorthand Property for Padding

The shorthand padding property allows you to set the padding on all sides (top, right, bottom, left) of an element in a single line. This makes your CSS cleaner and faster to write.

There are four ways to use the shorthand property depending on how many values you provide:

1. Padding with One Value

If the padding property has one value, it applies that padding equally to all four sides (Top, Right, Bottom, Left).

.element {
    /* Applies 20px padding to all sides */
    padding: 20px;
}

One Value Padding Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .myDiv {
            background-color: lightgray;
            border: 2px solid black;
            /* Applies 20px padding to all sides */
            padding: 20px;
        }
        .inner {
            background-color: yellow;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="inner">Uniform 20px Padding</div>
    </div>
</body>
</html>

2. Padding with Two Values

If the padding property contains two values:

The first value applies to the top and bottom padding.
The second value applies to the right and left padding.

.element {
    /* Top/Bottom = 10px | Right/Left = 40px */
    padding: 10px 40px;
}

Two Values Padding Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .myDiv {
            background-color: lightblue;
            border: 2px solid navy;
            /* 10px top & bottom, 40px right & left */
            padding: 10px 40px;
        }
        .inner {
            background-color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="inner">Wider on the sides, shorter on top/bottom</div>
    </div>
</body>
</html>

3. Padding with Three Values

If the padding property contains three values:

The first value sets the top padding.
The second value sets the right and left padding.
The third value sets the bottom padding.

.element {
    /* Top=10px | Right/Left=20px | Bottom=40px */
    padding: 10px 20px 40px;
}

Three Values Padding Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .myDiv {
            background-color: lightcoral;
            border: 2px solid darkred;
            /* Top: 10px, L/R: 20px, Bottom: 60px */
            padding: 10px 20px 60px;
        }
        .inner {
            background-color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="inner">More space at the bottom!</div>
    </div>
</body>
</html>

4. Padding with Four Values

If the padding property contains four values, it applies them in a clockwise direction: Top, Right, Bottom, Left.

.element {
    /* Top=10px | Right=20px | Bottom=15px | Left=35px */
    padding: 10px 20px 15px 35px; 
}

Four Values Padding Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        .myDiv {
            background-color: cyan;
            border: 2px solid darkblue;
            /* Clockwise: Top, Right, Bottom, Left */
            padding: 10px 50px 20px 100px;
        }
        .inner {
            background-color: white;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="myDiv">
        <div class="inner">Different padding on all four sides</div>
    </div>
</body>
</html>

Summary of All CSS Padding Properties

Combining individual side properties and shorthand properties, there are 5 total properties used for CSS padding:

Property	Description
`padding`	Shorthand property for setting all the padding properties in one declaration.
`padding-top`	Sets the top padding of an element.
`padding-right`	Sets the right padding of an element.
`padding-bottom`	Sets the bottom padding of an element.
`padding-left`	Sets the left padding of an element.

Exercise

If a CSS class uses the rule padding: 10px 30px;, how is the padding applied?

Top and left padding is 10px, bottom and right padding is 30px. Top and bottom padding is 10px, left and right padding is 30px. Top padding is 10px, right padding is 30px, bottom and left are 0. It applies 10px to all sides and ignores the 30px.