Published Aug 8, 2021Updated Apr 19, 2023
Contribute to Docs

The space between the contents of a box and the borders of a box is known as padding. Padding is like the space between a picture and the frame surrounding it.


In CSS, you can modify this space with the padding property.

p.content-header {
border: 3px solid coral;
padding: 10px;

Here, the code added 10 pixels of space between the content of the paragraph (the text) and the borders, on all four sides.

The padding property is often used to expand the background color and make the content look less cramped.

Video Walkthrough

Watch this video on the differences between the CSS margin and padding properties.

If you want to be more specific about the amount of padding on each side of a box’s content, you can use the following properties:


Shorthand property for padding-top, padding-bottom, padding-left and padding-right that sets the space between the content and margin of an element or for each side individually.
Defines the width of the bottom padding for an element.
Defines the width of the left padding for an element.
Defines the width of the right padding for an element.
Defines the width of the top padding for an element.

All contributors

Looking to contribute?

Learn CSS on Codecademy