3

行にさまざまなフォントサイズを使用している場合でも、CSS で一定の​​行間隔を維持できるかどうかを知っている人はいますか? 以下は、2 番目の段落の行間が最初の段落よりも大きい例です。CSS の「巨大な」スパンの line-height を 0 に設定しようとしましたが、十分ではないようです。

<?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>
4

1 に答える 1

2

使用する最大のフォントを収容するのに十分な大きさに設定するだけで、行間隔を一定にすることができます。仕様line-height上、ブロック要素に設定すると、行ボックスの最小の高さが設定されます。インライン要素の場合、事態はより複雑になりますが、要約すると、最終的にブラウザーが行ボックスの高さ、つまり間隔を決定できるようになります。

ただし、一部のブラウザでは、ブラウザに身長を使用させることができます。

span { display: inline-block; height: 16px; }
于 2013-01-21T14:59:37.737 に答える