Padding bewteen desktop, tablet, and mobile

Web design

Responsive Padding, Margin & Gutters With CSS Calc

Matthew James Taylor9 March 2022

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.

  • Small screens are best with minimal whitespace so there is room for the content.
  • Large screens need extra whitespace to give the content space to breathe.

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

  • Padding
  • Margins
  • Column gutters
  • Row gutters

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

  • For mobile devices, the ideal padding is somewhere between 13 - 15 pixels.
  • For tablets, padding looks best around 20 - 24 pixels.
  • For desktop, padding is best starting at 24 pixels and progressively wider for larger screens.

How To Set Padding At Different Breakpoints

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

  • Set padding size in pixels per breakpoint with media queries.
  • Pair padding size with font size by using em units.
  • Use percentage units so padding grows with screen width.
  • Use my responsive padding magic formula.

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

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

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

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

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!

Next up:
Responsive columns layout system
Responsive font size

Web design articles

Looking into an empty div

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

Web design
Columns all the same height

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

Web design
How to add CSS to HTML

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

Web design
A delicious soup made from custom elements

Replace Divs With Custom Elements For Superior Markup

Web design
Superman blocking styles

Style Blocker: How To Prevent CSS Cascade With Shadow DOM

Web design
Responsive text size

Responsive Font Size (Optimal Text at Every Breakpoint)

Web design
Responsive Columns Layout System

Responsive Columns: Build Amazing Layouts With Custom HTML Tags

Web design
Responsive house plan

Responsive House Plan (Web Design Meets Architecture!)

Architecture
Boggle dice shaker

Boggle Dice Shaker (Built With Javascript)

Web design
Footer at the bottom of the page

Get Down! How to Keep Footers at the Bottom of the Page

Web design
Is CSS margin top or bottom better?

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

Web design
Beautiful centered menus with CSS

CSS: Horizontally Centred Menus (With Optional Dropdowns)

Web design
Ads that can change size to fit any screen size

Responsive Banner Ads with HTML5 and CSS3

Web design