CSS Padding

The padding property in CSS is used to generate space around an element’s content, inside of any defined borders. You can set the padding for each side of an element (top, right, bottom, and left) or use the shorthand property to set all four sides at once.

Padding Properties

Here are the main properties used to set padding in CSS:

• 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.
• padding – Shorthand property for setting all four paddings at once.

Examples

Individual Paddings

You can set individual paddings using the padding-top, padding-right, padding-bottom, and padding-left properties.

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

Shorthand Padding Property

The padding shorthand property can be used to set all four paddings at once. The values are applied in the order: top, right, bottom, left.

div {
    padding: 20px 15px 20px 15px;
}

Padding and Width

When you set the width of an element, the padding will be added to the total width of the element. This can be adjusted using the box-sizing property.

div {
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}

Conclusion

The padding property in CSS is essential for controlling the spacing inside elements. By adjusting the padding, you can create visually appealing and well-structured designs that enhance the readability and aesthetics of your content.