1

少し初心者で、おそらく非常に単純な何かを理解しようとしています:

テキストを「スタック」しようとしていますが、次のように、大きな単語の間に小さな単語が 1 つ挿入されています。

これ

あります

重要

文

そこで、HTML を独自のクラスにメイン テキストを配置し、フォント サイズを 8em にして、中央に小さな単語のスパンを配置しました。

THIS<br>IS AN<br><span class="important">important</span><br>SENTENCE<br>

CSS では、「重要」のクラスを設定しました。

.important {
    font-size: 0.5em;
    line-height: 0.5em;
}

...そしてそれはそこにあり、見栄えはしますが、行の高さが足りないようです。「重要」という単語のサイズは 0.5em ですが、行の高さは他の単語と同じ高さなので、IS AN の後と「重要」の前に巨大なスペースができます。

「重要」の両側で、スパンの内側と外側の両方でbrを試しました。

 THIS<br>IS AN<span class="important"><br>important<br></span>SENTENCE<br>

...しかし、行の高さを取得できないようです。私は何を間違っていますか？

4

4 に答える 4

2

これは、使用されているマークアップの副作用です。改行 ( <br>) をブロック レベルのコンテナーに置き換えて、目的の動作 (単語を互いに積み重ねる) を実現します。次に例を示します。

HTML

<div>THIS</div>
<div>IS AN</div>
<div class="important">important</div>
<div>SENTENCE</div>​

line-heightもはや目的を果たさないため、宣言を失う可能性もあります。

CSS

body {
    font-size: 8em;
}
.important {
    font-size: 0.5em;
}​

参考文献

注:divコンテナーや要素など、任意のブロック レベル要素を使用できますp。段落は意味的により適切ですが、太いパディング、下マージンなど、段落に適用されるデフォルトのスタイルに注意する必要があります.

于 2012-07-08T17:00:57.350 に答える
1

これが最もコーシャな方法かどうかはわかりませんが、行の高さを調整する代わりに、そのようなテキストに負のマージンを与えることに成功しました。

于 2012-07-08T18:31:18.140 に答える
1

行の高さを正確に制御するのは難しいことです。これは、さまざまなブラウザーや OS が計算方法を解釈する方法が不安定であるためです。Adam Twardochは webfonts.info で、ブラウザーによって行の高さがどのように変化するかについて書いています。ここには、 line-height の操作に関するより一般的な記事もあります。

行の高さのコントロールは、より「グラフィックな」レイアウトを意図したものではありませんが、読みやすい段落を設定するためのデザイナー ツールボックスの一部です。エリランが言ったように、やろうとしていることにはブロック要素を使用してください。そうすれば、ポジショニングをより正確に制御できます。

于 2012-07-08T18:16:37.560 に答える
0

私は通常、<p>行の高さを調整することを好みます。次のようなことを試してください：

CSS:

p.important
{
    font-size: 0.5em;
    line-height: 0.5em;
}

HTML:

THIS<br>IS AN<br><p class="important">important</p><br>SENTENCE<br>
于 2012-07-08T17:05:21.737 に答える