CSS Padding, em vs px, vs blank?

1

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?

3

Ello,

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!

4

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

6

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?
Eg:
“Padding: 10 20 30”
(Without adding the 4th parameter).

7

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;
8

Thanks!
post needs 20 char min