Article Categories

Selected Reading

How to set padding around an element using CSS?

CSS Web Development Front End Technology

The CSS padding property is used to create space between an element's content and its border. This inner spacing appears inside the element, making the content appear further from the edges.

Syntax

/* Individual properties */
padding-top: value;
padding-right: value;
padding-bottom: value;
padding-left: value;

/* Shorthand property */
padding: value;                    /* all sides */
padding: vertical horizontal;      /* top/bottom left/right */
padding: top horizontal bottom;    /* top left/right bottom */
padding: top right bottom left;    /* clockwise from top */

Method 1: Using Individual Padding Properties

You can control each side's padding individually using specific properties

<!DOCTYPE html>
<html>
<head>
<style>
    .individual-padding {
        width: 200px;
        border: 2px solid #333;
        background-color: #e8f4fd;
        padding-top: 20px;
        padding-right: 15px;
        padding-bottom: 25px;
        padding-left: 10px;
    }
</style>
</head>
<body>
    <div class="individual-padding">
        This content has different padding on each side: 20px top, 15px right, 25px bottom, 10px left.
    </div>
</body>
</html>

A bordered box with uneven spacing around the text - more space at the top and bottom, less on the left side.

Method 2: Using Shorthand Padding Property

Single Value

One value applies the same padding to all sides

<!DOCTYPE html>
<html>
<head>
<style>
    .uniform-padding {
        width: 200px;
        border: 2px solid #333;
        background-color: #f0f8e8;
        padding: 20px;
    }
</style>
</head>
<body>
    <div class="uniform-padding">
        This content has 20px padding on all sides.
    </div>
</body>
</html>

A bordered box with equal 20px spacing around all sides of the text.

Two Values

Two values set vertical (top/bottom) and horizontal (left/right) padding

<!DOCTYPE html>
<html>
<head>
<style>
    .two-values {
        width: 200px;
        border: 2px solid #333;
        background-color: #fef0e8;
        padding: 15px 25px; /* 15px top/bottom, 25px left/right */
    }
</style>
</head>
<body>
    <div class="two-values">
        This has 15px vertical padding and 25px horizontal padding.
    </div>
</body>
</html>

A bordered box with 15px spacing on top and bottom, and 25px spacing on left and right sides.

Four Values

Four values follow clockwise order: top, right, bottom, left

<!DOCTYPE html>
<html>
<head>
<style>
    .four-values {
        width: 200px;
        border: 2px solid #333;
        background-color: #f8e8f8;
        padding: 10px 20px 30px 5px; /* top right bottom left */
    }
</style>
</head>
<body>
    <div class="four-values">
        Different padding: 10px top, 20px right, 30px bottom, 5px left.
    </div>
</body>
</html>

A bordered box with varying padding on each side, creating an asymmetrical spacing around the content.

Possible Values

Value Type	Description	Example
`length`	Fixed units like px, em, rem	`padding: 20px;`
`%`	Percentage of parent element's width	`padding: 5%;`
`inherit`	Inherits from parent element	`padding: inherit;`

Conclusion

The padding property provides flexible control over inner spacing in elements. Use individual properties for specific sides or the shorthand property for efficient, consistent spacing across your layouts.

Abhishek

Updated on: 2026-03-15T18:02:23+05:30

233 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next