Responsive Spacing

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

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:

Get hands-on with 1200+ tech skills courses.