Reputation: 136231

css: margin property uses both px and rem

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?

Upvotes: 0

Answers (5)

chapeljuice

Reputation: 886

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.

Upvotes: 1

Naresh

Reputation: 2781

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.

Upvotes: 0

pwdst

Reputation: 13735

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.

Upvotes: 0