csspixelcss-rem

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?

Solution

  • 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.