2

次のような 3 つのボタンがあります。

<div class="float-left">
   <button class="small">X</button>
   <button class="small">Y</button>
   <button class="small">Z</button>
</div>

これらに適用される CSS は次のとおりです。

button.small {
   font-size: 1.4rem;
   margin: 0 0.2rem;
   padding: 0.3rem 0.8rem;
   float: left;
}

float: left をこれらに適用すると、ボタン間の間隔が変化することに気付きます。誰かがこれがなぜなのか教えてもらえますか? マージンなどで違いはありますか?

4

1 に答える 1

2

ボタンをフローティングすると、ブロックレベルの要素になります。このため、マークアップ内のボタン間の空白は効果がありません。それらをフローティングせずに、通常はインラインで配置され、スペースが文内の単語を区切るのと同じように、それらの間の空白によってそれらが離れてしまいます。HTML では、連続する空白シーケンスは、1 つの通常のスペース文字であるかのように動作することに注意してください。

有効なスペースは、0.2rem設定したマージンだけです (ちなみに、これは折りたたまれません)。これらの余白は、ボタンがインライン レベルかブロック レベルかに関係なく同じです。

于 2013-10-22T08:45:08.530 に答える