Menu
Anyone who knows if it is possible to keep a constant line spacing with CSS, even though you use varying font sizes on a line? Below is an example where the second paragraph has a larger line spacing than the first one. I have tried to set line-height to 0 for the "huge" span in CSS, but it doesn't seem to be enough.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Line Spacing Test</title>
<style type="text/css">
body {
font-size: 14px;
line-height: 1;
}
.huge {
font-size: 64px;
line-height: 0;
}
</style>
</head>
<body>
<p>Here is a line using normal font size.<br />
Here is another line using normal font size.</p>
<p>Here is a line with a span with <span class="huge">huge</span> font
size.<br />
Here is another line with a span with <span class="huge">huge</span>
font size.</p>
</body>
</html>
948
asked Dec 15 '25 19:12
You can make line spacing constant only by setting it large enough to accommodate even the largest font used. By the specs, setting line-height on a block element sets the minimum height of line boxes. For inline elements, things are more complicated, but it boils down to letting browsers ultimately decide the heights of line boxes and hence the spacing.
On some browsers, however, you can persuade the browser to use your height e.g. by adding
span { display: inline-block; height: 16px; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
