Padding creates space inside an element between the content and the border.
Instead of learning this only in theory, let’s understand padding by writing real CSS code and seeing the result.
Here, padding adds space inside the box.
Without padding, the text would touch the border.
With padding, the box looks cleaner and easier to read.
Developer tip
Always use padding for buttons, input fields, cards, and menus.
Without padding, your design will look crowded and unprofessional.
Practice task
Create a box with:
Border: 2px solid red
Padding: 25px
Text: "Learning CSS padding"
Change the padding value and see how the size of the box changes.
Next lesson
In the next page, you will learn how borders work and how they affect the size of elements in the CSS box model.