html - ラベル間の非改行スペースは、レンダリング時に目に見えるスペースを作成します

Question

ここで何かが欠けているだけかどうかはわかりませんが、私のアプリでは次のようになります。

<label>Hello</label>
<label>World</label>

それらがレンダリングされると、次のようになります。

|こんにちは| |世界|

2 つのラベルの間には醜いスペースがあります (境界線または背景色を指定すると仮定します)。

ラベルを同じ行に移動すると、正常に機能します。

<label>Hello</label><label>World</label>

とにかくこのスペースを削除する方法はありますか?

score 3 · Accepted Answer

これは、ブラウザーによってインライン要素がレンダリングされる方法です。スペース、タブ、改行のいずれであっても、繰り返されない空白はそのままレンダリングされます。

最も信頼できる方法は、choose を使用してラベルをブロックレベルの要素として表示し、それらをフロートさせることです。ただし、ラベルをフローティングすると、ラベルがドキュメントフローから取り除かれ、親が折りたたまれてしまうことに注意してくださいoverflow: hidden。

マークアップが次のようになっているとします。

<form>
    <label>Hello</label>
    <label>World</label>
</form>

この問題を修正する CSS は次のとおりです。

form {
    overflow: hidden;
}
label {
    display: block;
    float: left;
}

ここで例を参照してください: http://jsfiddle.net/teddyrised/7RXDm/

または、ブラウザーのレンダリングによって導入されるスペースに近似する値を使用して、負のマージンを宣言することもできますが、特に柔軟なフォントサイズ、さまざまなフォントファミリ、およびさまざまなズームレベルを扱う場合は予測できません。

1 に答える 1