3

I have a problem with rem unit in CSS. In my current project all sizes are rem. When I set an element size (like div), the displayed size is 16 px * (x) ems. But when a div contains text or headings, the displayed size is 19 * (x) ems. This happens in Chrome, FF and IE. Here's an example:

html

<header id="header">
<h1 id="header-title">Blablabla</h1>
<h2 id="header-subtitle">LOL</h2>
</header>

css

#header {
  height: 10rem;
  padding: 2rem;
  text-align: center;
  width: 100%;
}

#header-title {
  font-size: 3rem;
  margin: 0;
}

#header-subtitle {
  font-size: 2rem;
  margin: 0;
}

Why?

EDIT: I've not declared line-height, by default it was 12.5px. I've searched more and I found the solution: https://stackoverflow.com/a/15135142/3552129

Community
  • 1
  • 1
user3552129
  • 55
  • 1
  • 6
  • 1
    I see no difference in size between when the headings are in the header and when they are not: http://jsfiddle.net/2a7xf/1/ – Pete Apr 24 '14 at 08:41
  • You should make sure that you set the `html` css class correctly: i.e. `html {font-size: 14px;}` using pixels or fixed size so that the `rem` (root em) has a root value to use which its self is not a relative size. – wf4 Apr 24 '14 at 08:48
  • Possible duplicate of [EM's for line-height](https://stackoverflow.com/questions/15132671/ems-for-line-height) – jaunt Oct 14 '17 at 00:02

0 Answers0