1

In an empty HTML document, I want to embedding some code in a paragraph. <p>Here's some <code>code</code> inside a paragraph.</p>

Result (Firefox, Linux):

the result

That doesn't quite look right. I want the text in the <code> tag to be the same height as the rest of the text. Firefox tells me it's not the same size; text in the <p> is 16px with the default stylesheet, and text in the <code> is 12px. Chrome on MacOS renders in Courier rather than Nimbus Mono PS, but in the same size. I can set it to font-size: 16px in the stylesheet and it does what I'd expect, but why does it have a smaller size in the first place?

Now, I'd chalk all this up to an oddity of the default stylesheet, except for adding a shouldn't-affect-the-size font-family tag makes it do exactly what I want...even if it's effectively a no-op! Adding <style> code { font-family: Nimbus Mono PS; }</style>---the font I was already using---yields the result I was expecting up front:

enter image description here

I can just deal with my confusion and add font-size: 16px;, but I'd really like to understand why this behavior is here, and more importantly, why the font-family style changes it.

Things I've (mostly) ruled out:

  • Something else on the page -- this minimal example is what I've been testing against:
<!DOCTYPE html>
<title> </title>
<style>
    code {
        /* font-family: Nimbus Mono PS; */
    }
</style>
<p>Here's some <code>code</code> inside a paragraph.</p>
  • A browser/OS quirk/bug -- I'm observing identical behavior in Firefox/Linux and Chrome/MacOS.

What's the deal?

Chandler Swift
  • 175
  • 1
  • 9
  • 2
    It's not a bug, it's simply every browser/OS having different styles by default. You could use an reset css to ensure the base you work off is almost the same though. – Viezevingertjes Sep 26 '20 at 04:58
  • @Viezevingertjes Like I mentioned in the question, behavior is identical across browser/OS for both OSs/browsers tested. My question is less about the default browser stylesheet (which is odd, but fine), and more about why the seemingly unrelated `font-family` tag changes the font size back to what I'd expect it to have been in the first place. – Chandler Swift Sep 26 '20 at 16:39

0 Answers0