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.

Other glossary terms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Hmm…we couldn’t find any results. Try a different search term or reset the filter.
Reset the filter
Load more