CSS - Padding | 1SMARTchicken

October 5, 2024

Overview

The CSS padding property gives an element space around its content, INSIDE of any defined borders. Each side of the element can be given its own padding value separately from the others, or all can be set as one.

For example, the text element below has the padding on all four sides set at 50px. A border has been applied to help visualize the padding, but even without a border, the padding would be the same.

This element (text) has a 50px padding on all four sides

Note

The following are basic examples. Towards the bottom of this page you’ll find a complete list of all applicable properties, where you can find more information on the properties discussed, and sometimes find more involved properties not discussed on this page.

Setting the Padding Values

The first example below sets the padding on all four sides to the same value, 50px. The second example individually sets all the sides to varying padding values.

/* set all 4 sides to 50px */
div {
    padding: 50px;
}

This element (text) has a 50px padding on all four sides

/* top, right, bottom, left padding */
div {
    padding: 25px 25px 10px 5px;
}

This element (text) has various padding on all four sides

Padding Properties

CSS – padding Property
The padding property sets the padding for an element, and is a shorthand property for padding-bottom, padding-left, padding-right, and padding-right.
CSS – padding-bottom Property
The padding-bottom property sets the bottom padding (spacing) of an element.
CSS – padding-left Property
The padding-left property sets the left padding (spacing) of an element.
CSS – padding-right Property
The padding-right property sets the right padding (spacing) of an element.
CSS – padding-top Property
The padding-top property sets the top padding (spacing) of an element.

CSS Notes:

The “inherit”, “initial” and “unset” keywords can be used with any CSS property to set its value
In CSS there are many ways to express a color value in a property

If you like our content, and find it helpful, please consider making a small donation. Thank you!

We’d like to acknowledge that we learned a great deal of our coding from W3Schools and TutorialsPoint, borrowing heavily from their teaching process and excellent code examples. We highly recommend both sites to deepen your experience, and further your coding journey. We’re just hitting the basics here at 1SMARTchicken.