Padding

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.

Visit Webflow University to learn more about spacing and padding and create functional and visually appealing websites.