Use margin and padding properties to create responsive content with consistent spacing.
Spacing is the foundation for almost every modern layout on the web. And it’s usually made up of two components: padding (which is the space inside an element) and margin (which is the space outside an element).
And we’ll cover how to adjust padding and margin on different kinds of elements (on one side, on opposing sides, and even on all sides), we’ll cover how to center something using auto margin, we’ll talk about negative margin and how we can use it to achieve overlapping designs, and at the end, we’ll tie it all together and make a critical note about when to USE padding and margin, and just as importantly, when NOT to use padding and margin. And we’ll use the classic Occam’s square example.
Let’s get right into adjusting padding and margin. Now, we’ll be using the Webflow Designer to demo this, but for a lot of it, we’ll pull up the CSS preview so you can follow along if you’re learning the syntax or hand-coding your layouts. But here’s a card, if we want to add space inside our card before the image starts? We just click and drag to add padding. That’s it. We added padding inside the element.
Now, if we want to click into that number? We can type a value manually and hit enter, or we can choose from any of the presets.
But for now, let’s move to margin, which is the space OUTSIDE of an element. If we want to add space on the bottom (below this heading)? We can add margin to the bottom.
Also, notice how this same class is applied to all the headings here. That means changing this styling on any one of them affects any heading in the project that has this class applied.
But what about buttons? Sometimes we want to adjust padding (we want to add space on both sides), but it’s a bit tedious to perfectly match both sides at once.
Enter: opposing sides. Just hold down Option on macOS or Alt on Windows and click and drag. Adjust both sides at once. This is helpful on all kinds of elements — like Containers...or iridium. (All our content here is inside a container, and it looks good on Desktop and Tablet) but when we get to Mobile landscape? It needs some breathing room. So. With the container selected, we’ll hold down Option (or Alt) and click and drag to add space on both sides at once. This’ll affect Mobile landscape, and of course, our changes cascade down to Mobile portrait.
What about all sides? Same deal here, except we’ll hold down shift when we adjust padding (these shortcuts work for margin, too).
Alright what about centering? One common technique for horizontally centering something like a container is to use auto margin. Apple does this (they use auto margin), Google does this on both sides, Figma — same deal here...you’ll see this technique all over the internet. An example would be here with a blank page: we have a div block (just a blank rectangle) and a bunch of stuff inside. If we want to horizontally er it? We can just set the margin on the left to auto, and we can go in and do the same on the right side (set it to auto). Now it’s horizontally centered.
Now. Do we have to manually set each side to auto every time? There’s a shortcut for this — you can just press the tiny button here to set both sides to auto.
Now, there are types of elements (certain layout types; display settings) like inline block (where auto margin won’t behave this way), or inline (same deal there), or display none, which, obviously, looks like nothing at all.
But for elements that DO work with auto margin, what about aligning vertically (auto margin on the top and bottom)?
Well here’s the rule: If you’re wanting to horizontally center something that has a defined width? You can use auto margin on the left and right (like we just did). But we can also use tools like flexbox which lets us set rules (we can set layout rules) on a parent element once. And this unlocks justification and alignment superpowers in all different aspects. (This works for single elements; it works for groups of elements.)
We have tons of teaching on this topic over at Webflow University, so check that out if you want to learn more about flexbox, CSS grid, and quantum field theory.
But that’s auto margin. Let’s talk about overlapping things using negative margin. Check this out: we have an image... if we set that image’s margin to a negative value? It’s going to move up in the document (and this’ll bring up other things on the page, too). This is valid CSS and a great way to achieve overlapping layouts.
Same thing here with these sort of bio cards. Images are inside the card, but if we set the image’s margin to a negative value? We can pull that up and get the effect we’re looking for.
Now. One final note on all of this (and we’ll cover this with Occam’s Square). And this is a really common question for those who are getting started with HTML, with CSS — should we use padding and margin to position EVERYTHING?
And the answer is: probably not. Padding is, of course, a great way to add some space. But it usually shouldn’t be used to size or position everything on the page. Same with margin — and what a lot of people might do is manually position things on the page and use padding and margin for all of it.
Enter: Occam’s square. You know it’s Occam’s because it says Occam on the screen. And what a lot of people might do is position this in the center by adding padding to the body or even (like we’re doing here) adding top and left margin to visually center it.
And here’s why that won’t work. If the width of our browser ends up changing (we can grab the edge to simulate what this page would look like on a narrower display)? It’s still the same number of pixels from the top and the left, so it’s no longer centered at all.
The problem with that sort of not-very-responsive design is that it’s not very responsive. There’s nothing wrong with adding some space under your heading or between some buttons to add some space to create breathing room inside the boundary of a card design (that’s great). But always make sure to check your designs for fluidity by grabbing the edge of the canvas and dragging — this’ll simulate how your design responds on devices of all widths.
And if you really want to just center something like this? Select its parent element (in our case, that’s the Body itself). And set it to flex. And you can use flexbox to align and justify... right to the center. If you have two of them? Two Occam’s Razor...s? THAT’S when you can add some space between (that’s a good example of margin).
So. We covered a lot here. Padding is the space inside an element’s boundary; margin is the space on the outside. We can hold down Option on macOS or Alt on Windows while dragging to adjust opposing sides at the same time, same with Shift if we want to adjust all sides, we can often use auto margin on an element to horizontally center it in its parent element, we can set something to negative margin if we want it to overlap, and we can test our designs on different device widths to make sure they’re fluid...and responsive.
But that’s an overview of spacing on the web.
In the Style panel, you can define spacing (margin and padding) for each element.
In this lesson
Spacing is the breathing room outside (margin) or inside (padding) an element’s boundary — you can add spacing to one side, complementary sides, or all four sides at once.
To add margin or padding to one side of an element
You can also choose one of the present numbers or manually adjust padding and margin:
To change spacing on complementary sides: h
This is useful when you want to add the same value to two opposite sides. You can also click the margin or padding control for one side and choose one of the presets while holding Option (on Mac) or Alt (on Windows).
You can apply the same value to all sides of an element by holding Shift and dragging the padding/margin on one side. You can also click the spacing control for one side and choose a preset while holding Shift.
The default spacing unit is pixels (px), but you can change it to any of the units listed in the unit’s menu. To access the unit menu, click any spacing control and choose the unit to the right of the spacing input field (e.g., PX, %, EM, VW, or VH).
You can also manually enter the value and unit in the input field. If you want to apply the same unit on all sides, hold Shift and drag the control you want to change.
Learn more about input values and units.
Clear spacing value on any side by clicking the blue value on the control while holding Option (on Mac) or Alt (on Windows).
Adding negative margin to an element pushes it outside its natural position on the page. Use a negative value (e.g., -100) to overlap elements.
The auto unit for margins is a powerful layout technique for pushing flex items to specific sides. For example, if buttons have a parent element using Flex, you can use auto margins to align those buttons to the same side of the parent element.
Learn more about the auto margin trick with flex.
Center an element horizontally using the center element button in the Style panel.
Selecting the center element button will set the element’s right and left margin to auto, leaving the display property unchanged. The margin will automatically fill available space.
Inline (inline-block) styled elements cannot be centered with the center element button (auto margin) because there’s no available horizontal space in an inline setting.
In some situations, margins of adjacent elements combine to form a single margin. This is known as collapsing margins and can be confusing since it can be overwritten in some situations and not others. Margins of adjacent grid children don’t collapse.
Learn more about collapsing margins.
One known issue is when footer content is invisible in the Designer and can’t be accessed. This often happens with a navbar that’s absolutely positioned and content is pushed out of the body element at the bottom of the page.
To avoid this issue, don’t add a top margin to the first element on your page if it doesn't have a fixed position. Instead, add top padding to the body element.
Something went wrong while submitting the form. Please contact support@webflow.com