🌦️ 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 and right) 6px (bottom); // SHORTHAND 2
margin: 2px (top) 4px (right) 6px (bottom) 8px (left); // SHORTHAND 1

So is margin-block (margin-inline, padding-inline, padding-block) a salvation? For sure if you do a lot of designs that only set top and bottom, or left and right margins, it’s convenient to use these properties.

I was able to write this article because my readers read it on Medium

But there are two teeny tiny issues with those properties.

First, it doesn’t really solve the problem I’ve stated in the previous article. Because, if you have to add right margin, or left margin, or remove a margin, you still have to juggle shorthands. But with this two properties you have a total of 5 shorthands to juggle. So it’s even worse.

Internationalization