Responsive Padding, Margin & Gutters With CSS Calc

Set Padding Size In Pixels Per Breakpoint With Media Queries

For this method, we need to first decide which breakpoints we want to use. To keep things simple in this example, we will use three breakpoints; mobile, tablet, and desktop.

Here's how our CSS will look:

/* Mobile */
.container {
    padding: 14px;
}

/* Tablet */
@media (min-width:600px) {
    .container {
        padding: 20px;
    }
}

/* Desktop */
@media (min-width:900px) {
    .container {
        padding: 24px;
    }
}

Pros with this method

• We have fine control over our padding sizes.
• We can easily add more breakpoints if we need finer control.

Cons with this method

• It's verbose. We can easily require many lines of CSS that can be problematic to maintain later.
• The padding size is stepped, which means it jumps between set sizes rather than smoothly growing to always perfectly match the screen size.

Pair Padding Size With Font Size By Using Em Units

Often it's the size of your fonts that will determine the most optimal padding size. By setting padding dimensions in em units you ensure there will always be a relationship between the two.

.container {
    padding: 2em;
}

This makes even more sense if you're using responsive font sizes. See my article: Responsive Font Size for details on how to achieve this with just a single line of CSS.

Pros with this method

• Font size and padding will be nicely matched together.
• Simple to do without much CSS.

Cons with this method

• It can give inconsistent values when different areas of a layout have different font sizes. You can overcome this to a degree by using rem units instead.
• Font size doesn't change enough from mobile to desktop to give the correct ratio of whitespace at all breakpoints.

Use Percentage Units So Padding Grows With Screen Width

By setting padding size as a percentage of the screen width it will automatically grow along with the screen size. But the percentage you need on mobile is different from the ideal percentage on desktop so you will still need to set sizes for each breakpoint like this:

/* Mobile */
.container {
    padding: 4%;
}

/* Tablet */
@media (min-width:600px) {
    .container {
        padding: 3%;
    }
}

/* Desktop */
@media (min-width:900px) {
    .container {
        padding: 2%;
    }
}

Pros with this method

• Padding smoothly grows with screen size even though there are still steps in size at each breakpoint.

Cons with this method

• Percentage units don't work inside elements that are not full width and they don't work vertically. You can get around these problems by using viewport widths (vw) in most instances.
• It's still verbose because you need to set sizes for every breakpoint.

Use My Responsive Padding Magic Formula

We can overcome all of the cons with the previous methods by using a magic formula to set our padding size.

Here's what it looks like:

calc(8px + 1.5625vw)

This magic formula combines pixel dimensions with viewport widths (vw) in the perfect ratio so padding is always at the perfect size for every screen size. It uses the well-supported calc function to do this (source).

Here are the padding sizes that this formula gives us at the most common screen sizes:

Pros with this method

• One line of CSS does all the work.
• It works horizontally and vertically.
• Padding is always at the perfect size, it smoothly changes with no steps.
• It works in elements that are of any width or nesting level.

This website (that you're reading right now) uses my magic formula for padding, margin, and gutter sizing. Adjust the size of your screen and see how it smoothly changes and always looks in balance.

“I've been developing websites professionally for over two decades and running this site since 1997! During this time I've found many amazing tools and services that I cannot live without.”
— Matthew James Taylor

I highly Recommend:

Ezoic — Best ad network for publishers

Earn more than double the revenue of Google Adsense. It's easy to set up and there's no minimum traffic requirements.

Learn more

Jasper — Best Content Creation Tool

Plan, outline, and write long-form website articles with the power of AI and produce content faster than ever.

Learn more

Canva — Best Graphic Design Software

Create professional graphics and social media imagery with an intuitive online interface.

Learn more

SiteGround — Best Website Hosting

Professional Wordpress hosting with 24/7 customer support that is the best in the industry, hands down!

Learn more

See more of my recommended dev tools.