.jpg)
Margins and padding are essential elements of spacing when it comes to web design.
If you know when and how to leverage each one, you’ll be well on your way to creating stunning, responsive websites that look great on any device. But mastering them can take some practice.
If you’re new to CSS or interested in learning more about margins vs padding, read on to learn precisely what they are and how to decide when to use each one.
Web design and coding basics
Before we dive into the nuances of margins and padding, let’s quickly review the basics of web development: HTML and CSS.
HTML (HyperText Markup Language) tells your web browser how to display a web page. CSS (Cascading Style Sheets) provides a set of rules that are applied to HTML and govern the style of a website. So, we rely on HTML to define the specific text for a header on a page, but we can use CSS to set a consistent font, text size, and color for all headers in the same class across a website.
The invention of CSS was a game changer for web development because it eliminated the need to write or rewrite an individual line of styling code for each element on every page of a website. CSS enables us to not only set consistent parameters for elements in the same class, but make changes to an entire class all at the same time.
What is the CSS box model?
CSS uses what’s called the box model to tell web browsers how to display and space different elements on a web page. All websites are made up of a series of boxes and these boxes have four major components.
- Content - The innermost part of the box. Content could be an image, text, heading, or something else.
- Padding - The inner space between the content and the border of your box.
- Border - The perimeter of the box. Borders can be invisible or they could be a thick colored line like the green one pictured above.
- Margin - The outer space (or lack of space) surrounding the box.
CSS boxes can be aligned vertically or horizontally. They can sit side-by-side, nest inside one another, and they can even overlap.
What’s the difference between margin and padding?
The main difference between padding and margin is that padding controls how much breathing room exists within a box, while margin controls how much breathing room or whitespace exists outside of a box.
Padding can be set to zero pixels and above. It can change its own element's size and impact how much of a fill color or background image is visible within a box.
Margins, on the other hand, are essentially invisible barriers around a box. They define how an element interacts with adjacent elements or the edge of a screen. Margins can be set to zero and above like padding. But unlike padding, margins can also be set to auto and can even have negative values.
Similarities between margin vs padding
In certain situations you can use either margin or padding to achieve similar results — and this is what makes the box model a bit confusing. Here’s an example.
The image above shows a set of nested boxes and their corresponding spacing in the Webflow Designer. We have a container box with a solid black border and light blue fill or background color. Within that container, there’s a div block containing a logo image (content), zero pixels of padding, a dotted black border, and a 100 pixel margin.
But we could achieve the exact same appearance using the container box’s padding instead of the div block’s margin. In the image below, we’ve increased the container’s padding from zero to 100 pixels and decreased the div block’s margin from 100 pixels to zero.
Sometimes, there isn’t one correct answer as to whether you should use margin or padding. So, don’t be afraid to play around with both options. Just make sure you review the appearance of your design on different screen sizes and adjust as needed to ensure your responsive web design looks great on any device.
As you can see in the image above, while 100 pixels of margin can look great on a large computer screen, your content may become imperceptibly small when viewed on a cell phone.
From the fundamentals to advanced topics — learn how to build sites in Webflow and become the designer you always wanted to be.
When to use CSS padding
We can use CSS padding to:
- adjust breathing space directly around content
- adjust the size of boxes or html elements
Let’s take a look at some examples.
Adjust breathing room around content
We can use padding to easily adjust breathing room around content within an element, such as a button or information card. Here’s an example using the Mariela Retail Website Template. This template comes with a beautiful intro section on the homepage that shows three “Intro Boxes.”
The “Intro Boxes” contain an image and an “Intro Text Box.” We could add more white space — or in this case, more Medium Thistle Hue space — around the text by increasing the “Intro Text Box” padding. Here’s what that looks like.
And because we’ve used the same class (Intro Text Box) for all three cards, we only need to adjust this once in the Webflow designer and the change will be replicated across all three cards. We could also add some breathing room around the images by adding padding to the image box. Here’s what that looks like.
Finally, we could add breathing room within the “Intro Text Boxes” evenly by selecting the whole box, holding down the shift key and dragging the padding control in the Webflow designer.
As you can see, adding padding to different elements creates space directly around content inside of a box.
Adjust the overall size of an element
We can also use padding to adjust the size of elements. Here’s an example using the Toystore Retail Website Template. This template has a “Hero Intro'' div block at the top with a white background color.
We can make the white box smaller by decreasing the padding (which comes preset to 24 pixels). Below you can see what it looks like if we change the padding to 5 pixels on all sides.
Or, we can make the box bigger by increasing the padding. Below you can see what happens when we increase the padding to 100 pixels on all sides.
If you prefer a more asymmetric look, you can also use padding to add whitespace to just one or two sides. Here’s what happens when we set padding-top and padding-bottom to 140 pixels but leave padding-left and padding-right at 24 pixels.
We wind up with more whitespace on the top and bottom of our box but less on the sides.
When to use CSS margin
We can use CSS margin to:
- center boxes
- adjust breathing room surrounding boxes
- overlap elements
Let’s take a look at some examples.
Center elements on a web page
To horizontally center items on a page using margin, we just set margin-right and margin-left to Auto. We can see examples of this technique all over the web but here’s an example you can play with in the Webflow Designer. Open up the Method Brand Website Template and click on the Hero Container at the top.
You’ll notice that the right and left margins are set to Auto.
This is how Container boxes work in Webflow, too. When you add a new Container to a project in the Designer the right and left margins are preset to Auto to center the Container.
Adjust breathing room outside of boxes
To demonstrate how we can use margin to adjust the breathing room or whitespace outside of boxes, let’s refer back to the Mariela Retail Website Template. Once again, here’s what the “Intro Boxes” look like when you first open up the template in the Webflow Designer.
The “Intro Boxes” come preset with a 3% margin-right on the first two boxes from left to right. This creates the gap or whitespace between the cards. Here’s what it looks like if we set all of the margin values to zero.
We can add margins to one side of a box, or as many as we’d like. But there’s one thing to be mindful of when playing with margins — margin collapse.
In many cases, if you have two adjacent items, the margins of each item will be added together and the displayed margin will be the sum of the two numbers. So, if card A has a margin-right set to 5 pixels and card B (positioned on the right side of card A) has a margin-left set to 5 pixels the whitespace between the cards will be 10 pixels.
But in certain cases, particularly when two elements are stacked on top of one another, the larger margin will be honored and the smaller margin will be collapsed, or treated as though it were set to zero. We can see an example of margin collapse in the text boxes above the “Intro Boxes” in the Mariela Retail Website Template. If we click on each box in the Webflow Designer we can see that the margin-bottom for the “Mini Title” is set to 10 pixels and the margin-top is set to zero pixels for the “Intro Paragraph.”
And if we add anything fewer than 11 pixels to the top margin of the “Intro Paragraph,” nothing happens. This is because the smaller margin is being collapsed.
Using margins for overlapping elements
One of the cool things about margins is that we can use them to overlap boxes or elements on a web page. Here’s an example from the Donerun Mobile Website Template. The iPhone image overlaps with the solid brown band, which gives it depth and makes it look like it’s sitting on top of the rest of the page.
This effect was achieved using negative margins on the top and bottom of the image. For comparison, here’s what happens when we set the iPhone image margins to zero on all sides.
The iPhone no longer overlaps with the colored strip at the bottom of the page and it now appears parallel with the header to the left of the image.
When not to use margin or padding
Margin and padding properties are awesome for creating breathing room or space in your design. But they aren’t the only controls available to you. And sometimes, neither one is your best bet. If you’re not already familiar with Position controls and the almighty Flexbox, I highly recommend checking out some of the lessons on those topics in Webflow University.
.jpg)
