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?

rem is not supported by all browser – Praveen Dabral Mar 30 '13 at 19:04 — Praveen Dabral, Mar 30 '13 at 19:04

score 4 · Accepted Answer · answered Mar 30 '13 at 19:02

4

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.

answered Mar 30 '13 at 19:02

Marcel Gwerder

8,353
5
35
60

Why will `rem` be chosen over `px`, if the browser supports both formats? – Adam Matan Mar 30 '13 at 19:03
1

@AdamMatan Because it is defined afterwards. – Niet the Dark Absol Mar 30 '13 at 19:04
Because rem is defined after px – Marcel Gwerder Mar 30 '13 at 19:04
1

+1 Thanks. So `rem` has precedence due to orde (comes before `px`), but if `rem` isn't supported `px` is the fallback. – Adam Matan Mar 30 '13 at 19:07

score 1 · Answer 2 · answered May 13 '14 at 22:24

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.

score 0 · Answer 3 · answered Mar 30 '13 at 19:01

0

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.

answered Mar 30 '13 at 19:01

Niet the Dark Absol

320,036
81
464
592

score 0 · Answer 4 · answered Mar 30 '13 at 19:04

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.

Naresh · Answer 5 · 2013-03-30T19:12:35.550

0

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.

edited Mar 30 '13 at 19:12

answered Mar 30 '13 at 19:05

Naresh

2,761
10
45
78

rem is not the same as em - and rem IS supported in Internet Explorer 9 upwards. – pwdst Mar 30 '13 at 19:08

css: margin property uses both px and rem

5 Answers5