Matthew James Taylor Matthew James Taylor

Web design ›

Responsive Padding, Margin & Gutters With CSS Calc

9 Mar 2022 — Updated 3 Apr 2023

Padding bewteen desktop, tablet, and mobile

Table of contents

When creating a responsive layout, you're not just moving elements around the page to make them fit at every screen size.

A user-friendly design will also adjust the whitespace between items so the arrangement always looks balanced.

Whitespace comes in many forms, but let's focus on the specific kinds of space that we can control with CSS:

With these forms of whitespace, we set their dimensions in CSS. For different breakpoints, we can adjust their size.

But what size should they be?

Let's consider padding as our example, but the following applies equally to all types of whitespace.

Optimal Padding Sizes Per Screen Size

How To Set Padding At Different Breakpoints

Here are several ways you can set padding size per breakpoint:

Let's go through these methods one by one so you can see the pros and cons of each method.

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

Cons with this method

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

Cons with this method

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

Cons with this method

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:

Screen width Padding size
320px (eg: iPhone 4 & 5) 13px
360px (eg: Galaxy S5) 14px
375px (eg: iPhone 6, 7, & 8) 15px
480px 16px
768px (eg: iPad portrait) 20px
1024px (eg: iPad landscape) 24px
1280px 28px
1536px 32px
1920px 38px
2560px 48px

Pros with this method

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.

Summary

For the best user experience, whitespace should always be proportional to the screen size, and the best way to do this is with a formula that combines pixels and viewport widths in the perfect ratio.

Try it today, it's just a single line of CSS!

Matthew James Taylor

“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

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

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

Canva — Best Graphic Design Software

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

Learn more

SiteGround

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.

Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

How responsive attributes work

Responsive Attributes: Generate CSS Grid Layouts With Simple HTML

Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

A web developer in the engine room

Best Web Development Tools (Free & Paid)

Columns all the same height

Equal-Height Columns (CSS Grid, Flexbox, Floated Containers, & Table Methods)

Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Holy grail 3 column layout responsive diagram

Holy Grail 3-Column Responsive Layout (CSS Grid & Flexbox Versions)

Footer at the bottom of the page diagram

Bottom Footer (CSS Grid, Flexbox, & Absolute Position Methods)

Open book two column layout

2 Column Layouts (Responsive, Flexbox & CSS Grid)

3 column product comparison layout

3 Column Layouts (Responsive, Flexbox & CSS Grid)

Is CSS margin top or bottom better?

CSS: Margin Top vs Bottom (A Trick You Should Know)

How to add CSS to HTML

How to add CSS to HTML (With Link, Embed, Import, and Inline styles)

Custom elements plus CSS with no javascript

Custom Element Examples (Without Javascript)

A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Racing car made from custom tags

Custom HTML Tags (18 Things To Know Before Using Them)

ID vs Class CSS selectors

ID vs Class: Which CSS Selector Should You Use? (6 Examples)

Looking into an empty div

Empty HTML Tags (21 Weird Things You Need To Know!)

Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Web design Web design Architecture Architecture Life drawing Life drawing Art gallery Art gallery Synesthesia Synesthesia Comics Comics

About Contact Privacy

© 1994 — 2024 Matthew James Taylor