{"id":1673,"date":"2024-04-11T15:12:32","date_gmt":"2024-04-11T21:12:32","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=1673"},"modified":"2024-04-11T15:12:33","modified_gmt":"2024-04-11T21:12:33","slug":"gap-is-the-new-margin","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/gap-is-the-new-margin\/","title":{"rendered":"Gap is the new Margin"},"content":{"rendered":"\n

In 2020, Max Stoiber wrote the \ud83c\udf36\ufe0f spicy Margin considered harmful<\/a>. On one hand, it seems silly. The margin<\/code> property of CSS is just a way to push other elements away. It’s very common and doesn’t feel particularly problematic. On the other hand… maybe it is? At least at the design system component level, because those components don’t know the context in which they will be used. Max wrote:<\/p>\n\n\n\n

\n

Margin breaks component encapsulation. A well-built component should not affect anything outside itself.<\/p>\n<\/blockquote>\n\n\n\n

Adam Argyle wrote slightly earlier<\/a> that he predicted the usage of margin<\/code> to naturally decline:<\/p>\n\n\n\n

\n

Prediction<\/strong>: margins in stylesheets will decline as gap in stylesheets climb<\/p>\n<\/blockquote>\n\n\n\n

Well it’s four years later now! Has any of this played out? Well it’s super hard to know. Anecdotally, it feels<\/em> like gap<\/code> is much more heavily used and my own usage is certainly up. There is public data on usage of CSS features<\/a>, and, amazingly, margin<\/code> usage does appear to be slowly going down.<\/p>\n\n\n\n\n\n\n\n

\"\"
Looks like a slow but sure declare the last 18 months or so.<\/figcaption><\/figure>\n\n\n\n

I say “amazingly” because the way this data is collected checks if the site uses the feature at all<\/em>, not how much<\/em> it’s used.<\/p>\n\n\n\n

\n

The chart below shows the percentage of page loads (in Chrome) that use this feature at least once.<\/p>\n<\/blockquote>\n\n\n\n

So seeing a dip here means less sites are using the margin<\/code> properly entirely<\/em>.<\/p>\n","protected":false},"excerpt":{"rendered":"

In 2020, Max Stoiber wrote the \ud83c\udf36\ufe0f spicy Margin considered harmful. On one hand, it seems silly. The margin property of CSS is just a way to push other elements away. It’s very common and doesn’t feel particularly problematic. On the other hand… maybe it is? At least at the design system component level, because […]<\/p>\n","protected":false},"author":1,"featured_media":1677,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[29],"tags":[7,153,152],"class_list":["post-1673","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-the-beat","tag-css","tag-gap","tag-margin"],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/frontendmasters.com\/blog\/wp-content\/uploads\/2024\/04\/gap-thumb.jpg?fit=1000%2C500&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1673","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/comments?post=1673"}],"version-history":[{"count":2,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1673\/revisions"}],"predecessor-version":[{"id":1676,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/posts\/1673\/revisions\/1676"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media\/1677"}],"wp:attachment":[{"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/media?parent=1673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/categories?post=1673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendmasters.com\/blog\/wp-json\/wp\/v2\/tags?post=1673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}