20250513074903

I’m trying to build a website that looks like a bullet journal, which means that I need the size of each element in the HTML page to have the correct size so that they’re aligned with the grid image in the background. I had some HTML and CSS code that looked like this:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space Grotesk&amp;Space Mono">
<style>
 
:root {
    --page-size: calc(var(--grid-size)*30);
    --grid-size: 1.5rem;
}
 
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
 
body {
    max-width: var(--page-size);
    margin: var(--grid-size) auto;
 
    background-color: rgb(22, 22, 24);
    background-image: radial-gradient(rgb(57, 54, 57) .075rem, rgba(0, 0, 0, 0) 0px);
    background-size: var(--grid-size) var(--grid-size);
    background-position: calc(50% + var(--page-size)/2) calc(var(--grid-size)/2);
 
    color: white;
}
 
p {
    font-family: "Space Grotesk";
    font-size: calc(var(--grid-size)*.8);
    line-height: var(--grid-size);
}
 
code {
    font-family: "Space Mono";
    font-size: calc(var(--grid-size)*.75);
    line-height: var(--grid-size);
}
 
</style>
</head>
<body>
<p><code>2024-05-13</code></p>
</body>
</html>

For some reason, the height of the p element is 24.5px while the code element is 24px. I’m not really sure where the extra 0.5px is coming from. The code element is strictly smaller than the p element and there isn’t any padding or margin.

After some searches online, I find the following StackOverflow post. As I understand it, apparently, the height of the p element is changing because it’s trying to place the baseline of the inline-level elements where the baseline of the parent box is. This results in the browser adding space above and below the element to align the baselines, causing the size discrepancy.

Changing vertical-align from the default value of baseline to top or bottom both fix the issue.

Backlinks