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&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.