Spacing (margin and padding)
Learn the ins and outs of padding and margin to set spacing on web elements. We'll use practical design examples to demonstrate how to add space inside and outside of cards, images, headings, buttons, and Occam's square.
00:00 - Introduction 00:44 - Padding & margin on one side 01:43 - Padding & margin on both sides 02:17 - Padding & margin on all sides 02:26 - Auto margin & centering 04:03 - Negative margin & overlapping 04:30 - Use cases & Occam's square
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Video transcript
Spacing in Webflow — margin and padding — is controlled through the Style panel and is one of the most fundamental concepts in CSS layout.
Padding is space inside an element, between the element's content and its border. Adding padding to a div increases its size while pushing the content inward. Padding is part of the element's clickable and background-colored area.
Margin is space outside an element, between the element and other elements around it. Margins create gaps between elements without affecting the element's own size or background.
In Webflow, you set margin and padding directly in the Style panel's Spacing section. You can set individual values for top, right, bottom, and left, or use the shorthand to set all four sides at once. You can also use auto margins for horizontal centering, which is a common pattern for centering block elements.
One important behavior to understand is margin collapsing: when two vertically adjacent block elements both have vertical margins, the larger margin wins rather than both adding together. This is standard CSS behavior and can sometimes cause unexpected spacing. Using padding instead of margin, or switching to a Flexbox layout, avoids margin collapsing.
Getting comfortable with margin and padding is essential before tackling more complex layouts, since almost every layout decision involves some combination of the two.
