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.
