📐 Gap vs. Margin: Rethinking Spacing in CSS
Tags: css, ux, html, beginners
Published: 2024-04-24 17:38:00


**Hey** 👋 I hope you're having a great week. Here's a quick look at this week's newsletter:

🚀 Google Core Web Vitals Unpacked  
🔍 Why 90% of Designers Don't Make the Cut  
🎨 Disney's Animation Secrets Transformed for UX Design

Enjoy this week's edition 👋 - Adam at Unicorn Club.  

---

Sponsored by  [Webflow](https://go.unicornclub.dev/webflow-agency)

## [Accelerate your agency’s growth](https://go.unicornclub.dev/webflow-agency)

[![](http://unicornclub.dev/wp-content/uploads/2024/04/unicorn-club-agencies.jpg)](https://go.unicornclub.dev/webflow-agency)

Whether you need to win new business or wow an existing client, Webflow empowers agencies to deliver high-quality client work, faster — without growing your dev budget.

[**Start building →**](https://go.unicornclub.dev/webflow-agency)

---

### 🦄 This week's best

[**Gap is the new Margin**](https://frontendmasters.com/blog/gap-is-the-new-margin/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

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?

[**Folding the DOM**](https://www.joshwcomeau.com/react/folding-the-dom/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

For years now, browsers have bundled in a surprisingly capable 3D CSS engine! Today I'd like to leverage that 3D engine to perform a neat trick: folding up an image.

[**Sliding 3D Image Frames In CSS**](https://www.smashingmagazine.com/2024/04/sliding-3d-image-frames-css/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Creating 3D effects in CSS isn’t an entirely new concept, but typical approaches use additional elements in the markup and pseudo-elements in the styles to pull it off.

[**Making Disabled Buttons more Accessible**](https://dev.to/josefine/making-disabled-buttons-more-accessible-21ih?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Despite the fact that you may have good reason to disable a button for your users, it’s important to make sure to provide enough context for all users to avoid confusion and good user experience.

----

**🧠 Fun Fact**

****Box Model Confusion****  - In the early days of CSS, the interpretation of the box model varied between browsers, notably between Internet Explorer and others. This led to inconsistent layouts until the box-sizing property was introduced, allowing developers to standardize the model across browsers for predictable sizing of elements.

----

[**How To Monitor And Optimize Google Core Web Vitals**](https://www.smashingmagazine.com/2024/04/monitor-optimize-google-core-web-vitals/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

The three Core Web Vitals metrics don’t only tell you how visitors experience your website but also impact your Google search result rankings.

[**90% of designers are unhirable?**](https://uxdesign.cc/90-of-designers-are-unhirable-3a8238e3cca2?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Here’s the harsh truth: I’ve reviewed more than 1,000 portfolios in my design career so far, and I turned 90% of them down because of one thing — the linear design process.

[**Disney’s 12 principles of animation, exemplified in UX design**](https://uxdesign.cc/disneys-12-principles-of-animation-exemplified-in-ux-design-5cc7e3dc3f75?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Digital products like apps and websites started as counterparts to print media, offering similar content and functionalities, just in a different medium.

### 🔥 Promoted Links

_Share with 2,000+ readers, book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)._

[**Get smarter about Tech in 5 min**](https://go.unicornclub.dev/techpresso)

Get the most important tech news, tools and insights. Join 90,000+ early adopters staying ahead of the curve, for free.

#### Support the newsletter

If you find Unicorn Club useful and want to support our work, here are a few ways to do that:

🚀 [Forward to a friend](https://preview.mailerlite.io/preview/146509/emails/119382606276986537)

📨 Recommend friends to  [subscribe](https://unicornclub.dev/)

📢 [Sponsor](https://unicornclub.dev/sponsorship)  or book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)

☕️ [Buy me a coffee](https://www.buymeacoffee.com/adammarsdenuk)

_Thanks for reading ❤️  
[@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK)  from Unicorn Club_