1 
<!DOCTYPE html>
<html>
<body>
  <span style="font-size:48px">abc<br></span>
  <span style="font-size:6px">abc<br>abc</span>
</body>
</html>

HTML5 doctype を使用する場合にのみ、IE9 は行の周りに追加のマージンを設定します。font-size:0またはline-height:0onを追加し<br>ても効果はありません。

どうすればこれらのマージンを取り除くことができますか?

4

2 に答える 2

4

ブラウザーごとに処理方法が異なりますが、どのアプローチが適切かはわかりません。私の直感では、IE はこれを正しく行いますが、Firefox は間違っています。（現在、他のブラウザでは確認できません。申し訳ありません。）

スパン内の<br>はスパンを 2 行高くし、フォント サイズが 48px であるため、後半のベースラインは前半から 48 ピクセル下になります。そして、そこから 2 番目のスパンが始まります。同じベースラインで継続します。

それを避けたい場合は、スパンをベースラインに合わせないでください。

<style>span {vertical-align:top}</style>

HTML（頭の中）で。こうすることで、2 番目のスパンのテキストは、ベースラインではなく行の先頭でフラッシュされます。

ここに画像の説明を入力

于 2012-10-24T18:14:34.783 に答える
0

あなたの問題を自分でテストすることなく、休憩に負のマージンを与えてみましたか? 例えば

<br style="margin-top:-3px" />

どの方法で問題が発生しているのかわかりません<br>

しかし、あなたへの私の他の質問は、なぜあなたは<span>体内で直接使用しているのですか? あなたの例に基づいて、代わりに次のことを提案します（ただし、あなたが何を達成しようとしているのかはまだ100％わかりません）：

<!DOCTYPE html>
<html>
<body>
    <h1>abc</h1>
    <p>abc</p>
    <p>abc</p>
</body>
</html>

次に、CSS で、必要なフォント サイズ、行の高さなど<h1>を<p>指定できます。

h1 {
    font-size:48px;
    margin-bottom:0;
}

また、font-size:6px;非常に小さく、誰にとっても非常に読みにくいでしょう。場合によっては、特定のブラウザーやデバイスがそれほど小さいフォント サイズをレンダリングしないことさえありますが、その代わりに、font-size:10px;代わりに自動的にレンダリングする場合があります。本文テキストには最低 12px をお勧めします。できればもう少し大きいサイズが望ましいです。

于 2012-10-24T16:19:27.970 に答える