css: margin property uses both px and rem

Question

Consider the following css class definition, taken from the worpdress twenty-twelve theme:

.entry-header {
   margin-bottom: 24px;
   margin-bottom: 1.714285714rem;
}

Why is the margin-bottom defined twice, once with px and once with rem units? Which unit will be chosen by the browser?

Answer 1

I think because rem isn't supported by all browsers.

Have a look at caniuse to see browser support in detail.

So they defined it as px for the older ones and as rem for the ones which support it.

Answer 2

Not all browsers support the rem unit - I'd never heard of it until now! Browsers that don't support it will use the px value.

Answer 3

rem is a new unit in CSS3, it defines the font size for the root element (usually the HTML element of the document). As it is a new unit it is not supported in all browsers, see http://caniuse.com/#feat=rem, so the px value is provided as a fallback. If rem is supported, that value will be used, otherwise the px value.

See https://developer.mozilla.org/en-US/docs/CSS/length for details on CSS length units.

Answer 4

In simple Words...

Px is used to fix in All browser instead of IE. Because IE do not have the ability to change the size using the browser function.

Em That whole inability to re size text in IE has been a continuing frustration. To get around that, we can use em units.

CSS3 introduces a few new units called "rem", which stands for "root em". The em unit is relative to the font-size of the parent, which causes the compounding issue. The rem unit is relative to the root—or the html—element.

Answer 5

There are two font-size declarations because the developer would prefer the browser use the 'rem' units, but if the browser does not support rem it will fall back to using the standard 'px' units.

Old browsers that don't support the 'rem' units will just ignore the declaration.

Newer / current browsers will use the 'cascade' and use whatever unit of measurement is declared last. In this case, the sizing with 'rem's.