Mastering the Latest Features in CSS/

...

/

Responsive Spacing

Responsive Spacing

Learn how to set margin and padding in a responsive manner using clamp() and min().

We'll cover the following...

Spacing between and around elements can quite literally make or break a layout. Over the years, popular frameworks have provided quite strict spacing scales based on pixels and bound to viewport media queries.

Conventional method of scaling layouts

The following code is an example of spacing that’s bound to pixels and the viewport:

Press + to interact
.pt-1 { padding-top: 8px; }
.pt-2 { padding-top: 16px; }
.pt-3 { padding-top: 24px; }
/* "Medium (md)" breakpoint */
@media (min-width: 768px) {
  .pt-md-1 { padding-top: 8px; }
  .pt-md-2 { padding-top: 16px; }
  .pt-md-3 { padding-top: 24px; } }
/* "Large (lg)" breakpoint */
@media (min-width: 1024px) {
  .pt-lg-1 { padding-top: 8px; }
  .pt-lg-2 { padding-top: 16px; }
  .pt-lg-3 { padding-top: 24px; } }

This example application of those classes assumes we want to increase space for larger viewports, which then requires multiple classes to change the padding based on the available viewport space:

Press + to interact
<div class="pt-1 pt-md-2 pt-lg-3">

While this convention is still a valid method, we can do better by leveraging more dynamic units that are also more localized to content sizes.

Properties used for spacing

Three properties are used for applying spacing around and between elements:

  • padding: This is used for spacing for an individual element’s box.

  • margin: This is used for spacing between elements. ...