Code text not vertically aligned with regular text.

[ilg-ul]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

I noticed a small aestetic issue with code text, it is rendered slightly below the regular text baseline:

My knowledge of CSS is poor, but I think that the reason is the code having vertical-align: middle.

Apparently setting it to baseline looks better:

Reproducible demo

No response

Steps to reproduce

Define a H1 header with a short code in the middle

Expected behavior

All letters be aligned to the baseline.

Actual behavior

The code is below the baseline.

Your environment

• Docusaurus version used: 3.5.2
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Safari
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): macOS 14.6.1

Self-service

• I'd be willing to fix this bug myself.

[ilg-ul]

I don't know if the code is aligned to middle on purpose or by mistake.

I added a small patch to my local css, and apparently the issue was fixed everywhere:

code {
  vertical-align: baseline;
}

[ishsarin]

Hi, can I work on this?