🌦️ Ditch Margin-Block And Margin-Inline If You Don’t Do That

Otherwise you can run into some chilly trouble 🥶

I wished we had G-Cans in Poland:

G-Cans under Tokio, by AMANO Jun-ichi, CC BY 3.0, source

Such gigantic structures collect water floods that would end up on the streets of Tokio. Unfortunately in my country, Poland, and neighbour countries there are floods so disastrous that our constructions have hard time dealing with them. Some of the cities in the south of Poland are underwater right now.

But it stopped to rain, so that’s a good thing 👍

I was lately made aware by Derek Erb in the comment section that:

In 2024 you should be “teaching” inline-start / end instead of left / right and block-start / end instead of top / bottom

Thanks Derek for your comment!

So let’s discuss this approach. Margin block looks like this:

margin-block: 10px 20px;

The first value is the top* margin and the second is the bottom* margin. What is something some people find convenient. Because there’s no margin shorthand for only top and bottom. Just to recall margin shorthands:

margin: 2px (all margins); // SHORTHAND 4
margin: 2px (top and bottom) 4px (left and right); // SHORTHAND 3
margin: 2px (top) 4px (left…