Code Editor
Web Browser

The space between the contents of a box and the borders of a box is known as padding. In CSS, you can modify this space with the padding property.

p { border: 3px solid #A2D3F4; padding: 10px; }

The code in the example will put 10 pixels of space between the content of the paragraph (the text) and the box borders, on all four sides.

The padding property is particularly useful at making text easier to read when the text has a border around it.

Note: In the last couple of lessons, you learned how to set the width and height of a box. When padding is set for a box (as in the example above) it will be added to the width and height of a box, increasing the dimensions of the box. We'll learn how to avoid this problem in the next lesson.

Report a Bug
If you see a bug or any other issue with this page, please report it here.