CSS Padding, em vs px, vs blank?


Hi guys

Quick answer on the difference between px and em?
em seems to be about px times 10.
Eg: 10px equals about 1em.

Another thing is, in CSS style, I can write: “padding: 10 20 30 40”, and the same output appears as if I was putting ‘px’ behind them.

Is it acceptable coding, to drop the ‘px’ at the end?


1 pixel is 1/96th of an inch (with some caveats based on the pixel density of the device).

1em = 1 * the size of the font. So, if your font-size is 16px, 2em = 32px

The padding as you have it padding: 10 20 30 40 should not work. Units are required unless it’s a value of 0.

Here’s a good read for more info: https://www.w3schools.com/cssref/css_units.asp



px is an absolute measurement, where em is relative. If for example you have a nested div and give the inner and outer div a font-size of 2 em, the inner div font size will be bigger.

I didnt know that about padding but you should probably leave the px for readability if that is the case, edit: As SkyC pointed out the padding as you have it shouldnt work.

padding can accept values other than px, such as %, and I believe em as well, so even if it could work, it would be inadvisable to leave off the unit.

Good Luck!


Padding without px seems to work in the css exercises here:


That’s an unfortunate bug it seems. Units are required unless it’s a 0.

You can try it out here: https://codepen.io/anon/pen/PKppmp?editors=1000


I’ll check later, as the link doesn’t work well on my mobile browser.
It seems also possible to define just 2 parameters out of 4. Or 3. Is this normal as well?
“Padding: 10 20 30”
(Without adding the 4th parameter).


It’s perfectly normal to define two or three parameters, what happens then depends on number of parameters you give.

With 2 parameters, first one is responsible for vertical values (top, bottom) and second parameter is horizontal (left, right).

With 3 it gets a bit more tricky. But basically, first parameter is then top, second param is responsible for both horizontal values (left, right) and last one is bottom.

Also I would like to add, since we’re discussing units here, that you can mix units freely, e.g.

padding: 10px 20% 5em 0;


post needs 20 char min