This site runs best with JavaScript enabled.

Remember TRBL

The TROUBLE remembering the order of things in CSS

This post (like many I write) is mainly for myself.

When using CSS padding or margin, I generally will write margin-top, margin-bottom, margin-left, etc. I know there is easier syntax where I can specify all for with one line such as

1margin: 0 10px 88px 10px;

The problem is, I can never remember which one is where. Know I'm not going to forget. It's simply top, right, bottom, left... TRBL, TRouBLe, trouble. Who can forget trouble?

Sometime I want the top and bottom the same and the left and right the same. It is also a one-liner:

1margin: 10px 20px; /_ top-bottom, right-left _/

No, I'm not going to remember TBRL, that would be stupid. I'll just remember to start at Top. See, no TRouBLe at all!

Discuss on TwitterEdit post on GitHub

Share article
Dustin Davis

Dustin Davis is a software engineer, people manager, hacker, and entreprenuer. He loves to develop systems and automation. He lives with his wife and five kids in Utah.

Join the Newsletter

Dustin Davis