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:
You can also use percentage values to perform this function:
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.