CSS padding vs margin: how to decide which to use

CSS padding vs margin: how to decide which to use
Feb 3, 2022

[ad_1]

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.

Simple diagram showing content inside of padding inside of a border surrounded by a margin.
  1. Content – The innermost part of the box. Content could be an image, text, heading, or something else. 
  2. Padding – The inner space between the content and the border of your box.
  3. Border – The perimeter of the box. Borders can be invisible or they could be a thick colored line like the green one pictured above. 
  4. 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. 

A static image of the Sutro Baths in San Francisco with margin space around the photo appears on the left. The same static image of the Sutro Baths appears on the right but instead has padding space.

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.

A header image showing a logo for a business named Sad Zebra depicting Zebra ears on a sky blue background. Below it, there are two images from the Webflow Designer: the left one depicting 0px padding for containers, and the right one depicting 100px margins for a div block.

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.

A header image showing a logo for a business named Sad Zebra depicting Zebra ears on a sky blue background. Below it, there are two images from the Webflow Designer: the left one depicting 100px padding for containers, and the right one depicting 0px margins for a div block.

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.

A div block highlighting a logo for "sad zebra" and how it would appear on mobile devices using the Webflow Designer.

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.

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.”

A cushion designer's website displaying intro text, a "learn more" button, and three clickable intro boxes: about me, my products, and contact me

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.

A cushion designer's website displaying intro text, a "learn more" button, and three clickable intro boxes: about me, my products, and contact me. In this version, the padding is larger where the text appears at the bottom of each image block.

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.

A cushion designer's website displaying intro text, a "learn more" button, and three clickable intro boxes: about me, my products, and contact me. In this version, there is padding around each image displayed in each intro box.

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. 

A cushion designer's website displaying intro text, a "learn more" button, and three clickable intro boxes: about me, my products, and contact me. In this version, there is more padding around each image in the intro box and the intro box text appears directly below the image instead of closer to the edge of the intro box.

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. 

A hero intro div block on the ToyStore website. It reads: "Say Hello to ToyStore!" followed by "Free Ecommerce Template for Webflow." Below this text, there is a green call-to-action button that says "Open Catalog." The div block is surrounded by significant white padding.

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.

A hero intro div block on the ToyStore website. It reads: "Say Hello to ToyStore!" followed by "Free Ecommerce Template for Webflow." Below this text, there is a green call-to-action button that says "Open Catalog." The div block is surrounded by minimal white padding.

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.

A hero intro div block on the ToyStore website. It reads: "Say Hello to ToyStore!" followed by "Free Ecommerce Template for Webflow." Below this text, there is a green call-to-action button that says "Open Catalog." The div block is square shaped and surrounded by 100px worth of white padding on each side of the text..

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.

A hero intro div block on the ToyStore website. It reads: "Say Hello to ToyStore!" followed by "Free Ecommerce Template for Webflow." Below this text, there is a green call-to-action button that says "Open Catalog." The div block is square shaped and has move white padding above and below the text than on the sides.

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. 

A snapshot of the spacing controls in the Webflow Designer set to "auto" for margins.

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.

A cushion designer's website displaying intro text, a "learn more" button, and three clickable intro boxes: about me, my products, and contact me.

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.

A cushion designer's website displaying intro text, a "learn more" button, and three clickable intro boxes: about me, my products, and contact me. In this version, the three intro boxes are all connected.

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.

A cushion designer's website displaying intro text, a "learn more" button, and two clickable intro boxes: about me and my products. In this version, the two intro boxes have 10px of white pace between them.

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.” 

A snapshot of the spacing controls in the Webflow Designer being used to add ten pixels of padding above and below hero title text.

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.

An image of iPhone on a website homepage displayed beside the fictional company name, "Donerun." The iPhone image is highlighted to display the margin width with the image layered over the bottom solid brown site footer.

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.

An image of iPhone on a website homepage displayed beside the fictional company name, "Donerun." The iPhone image is highlighted to display negative margins, disabling the image to display over the browns site footer.

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.

[ad_2]

NAKISISA GEORGE

Leave a Reply