Home/ Questions/Q 8253383
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T00:51:33+00:00

UPDATE: Please note that I am seeing this issue only in Chrome (latest version).

  • 0

UPDATE: Please note that I am seeing this issue only in Chrome (latest version). Everything seems to be fine in Firefox.

By definition:

The rem unit is relative to the root—or the <html>—element. That means
that we can define a single font size on the <html> element and define
all rem units to be a percentage of that.

Let me explain my situation with an example…

Relevant CSS:

html {
    font-size: 87.5%;
}

body {
    font-size: 17px;
    font-size: 1.21428571rem;
}

code {
    font-size: 14px !important;
    font-size: 1rem !important;
}

I am using the !important declaration to override the font-size of inline code.

The thing is, I noticed that the font-size of code blocks is much smaller than 14px, most probably 12px. But if I remove the !important declaration and set the font-size on a specific code element (styling a specific inline code element), the fonts-size is nice and fine at what appears to be 14px.

Does you have any idea as to how !important declarations may affect sizing in rem‘s? (Especially considering in my case.)

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Okay, the issue was with (1) font-family not defined for code and pre blocks, which meant Chrome and other webkit browsers chose some monospace font that appears smaller (2) line-height was smaller (almost equal to the font-size).

    Fixing these two has solved the problem.

    I have no idea why Chrome Dev Tools Web Inspector’s “Computed Style” shows 11px as the font-size (also applies to any webkit browser, including Safari). I can confirm that it’s showing the wrong value because by changing the font to Arial I could easily tell that it’s 14px.

    Also, after setting the font-family on code and pre blocks, Chrome now shows the correct computed font-size value.

    • 0