Stay out of TRouBLe with shorthand properties.
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 15pxBut 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 20pxOh 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! 🚀 🚀 🚀
