Stay out of TRouBLe with shorthand properties.

Photo by Pankaj Patel on Unsplash

So I am currently reading a great book titled CSS in Depth — I think it’s a pearl if you ask me. Anyways, I discovered something that has bugged for quite a while and that's understanding CSS property shorthands for setting values like margins and paddings.
Have you seen declarations like this:

You have, haven’t you 😉? And I guess it has taken you quite a while to understand them, you are not alone.

Top Right Bottom Left

The first thing to note is that the pattern for the shorthand is like a clock and it goes top right bottom left. In essence when you see a declaration like this:

padding: 1rem;

It translates:

Pretty cool right?

Psst: You could remember the pattern with the mnemonic TRouBLE

Omitting Values Prelude

Most often than not you see declarations like this, especially on buttons or links, style declarations.

padding: 5px 15px

But wait, that doesn’t apply to our pattern of the top right bottom left! What has happened?

Omitting Values

What happened is that the author of the declaration decided to use an even shorter form by omitting some values. Omitting values works in this fashion:
the omitted value(s) get to take the value opposite it e.g if the bottom is omitted, it takes the top value, if left is omitted, it takes the right value. Easy peasy eh?
So the above declaration means

The 3 Amigos 😁

One very troubling declaration for developers(at least it was for me) is this:

margin: 5px 15px 20px

Oh my gosh! what does that mean? I know, I got you, let me explain, may I?
Technically it didn’t deviate from our omitting value(s) rule, the omitted value in this case which is the left margin value would take the opposite value which is right padding:

Hence, the above reads

Conclusion

I hope this helps you and I would advice committing it to memory since you would come across them quite a number of time and also use them in your own CSS rulesets.
Happy Deploying! 🚀 🚀 🚀


Stay out of TRouBLe with shorthand properties. was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.