DEV Community

Discussion on: What's the one thing you always need to google?

emma profile image
Emma Goto 🍙

The shorthand form of css padding - e.g. when you do padding: 8px 0 I can never remember which sides it applies to.

satishpatro44 profile image

Always clockwise. If one to all. If two, two opposite starting from top. If three top right side common buttom. If four clockwise from top. This is how I remember

lkhrs profile image

Thank you, I've just been switching the values around until it works for the past 8 years. Kept forgetting to just look it up and keep it as a stickynote on my desk

wobsoriano profile image
Robert • Edited

For real! Me too

cubiclesocial profile image

You can always use the long-form: padding-top, padding-right, padding-bottom, padding-left. There can be advantages to using the long-form as well if you don't want to override some parent style by accident.

I generally prefer using em (e.g. 7px is ~0.3em) rather than px for most padding and margins. That way, if someone enlarges the page, the padding/margins scale up too and keeps the presentation looking nice and spaced out properly without expending any extra effort. I use px in select (aka rare) locations where something needs to remain 'x' pixels from a specific edge regardless of text size.