Padding is a CSS property defining the space between an element's borders and its content, such as text, images, and other media. The "padding" syntax property specifies the padding area — the space between an element and its border — and can be set to 0 pixels and above.
Padding creates space within an element, while the margin property creates space outside of it. You can use padding to move content away from the borders of a screen to make it more attractive, readable, and user-friendly.
For example, the following CSS padding order adds 20 pixels of space between an element and its 4 borders:
p {
padding: 20px;
}
You can also use percentage values to perform this function:
h1 {
padding: 20%;
}
You can change the value using pixels or percentages to increase or decrease the amount of padding. It’s also possible to customize each border’s padding using specific functions — such as the "padding-left" property — so all 4 aren’t identical.
