css - 2 つのインライン ブロック要素間のギャップ

Question

html で 2 つの要素をまとめて作成し、それぞれをインライン ブロックにしました。これら 2 つの要素の間には常にギャップがあることがわかりましたが、実際には、それらにパディング/マージン属性を設定していませんでした。誰かがこのギャップを修正する理由と方法を教えてもらえますか?

Answer 1

CSS:

span {
  display: inline-block;
}

HTML:

<span>This will have</span>
<span>a gap between the elements</span>

<span>This won't have</span><span>a gap between the elements</span>

Answer 2

HTML コメントを使用して、空白を削除し、適切なコード形式を維持できます。

   <span>1</span><!--
--><span>2</span><!--
--><span>3</span>

Answer 3

を使用する場合inline-blocks、マージンを削除するには、親コンテナーにword-spacing: -3px;と を適用してから、 と を使用してインライン ブロック要素でこれらのルールを元に戻します。letter-spacing: -3px;word-spacing: normal;letter-spacing: normal;

たとえば、この基本的なマークアップで

<div>
   <span>...</span>
   <span>...</span>
   <span>...</span>
</div>

最小限のCSSコードは

div {
   word-spacing: -3px;
   letter-spacing: -3px;
}

span {
   word-spacing: normal;
   letter-spacing: normal;
   display: inline-block;
}

もう 1 つの可能性 (お勧めしませんが、とにかく知っておくと便利です) はfont-size: 0;、親コンテナーに設定することです。

Answer 4

これは奇妙な動作であり、修正することができます。マークアップを次のように変更してください。

<div class="inline">
   first
</div><div class="inline">
   second
</div>

別のインライン要素を定義するときは、スペースを入れないでください。