[解決済み】このインラインブロックのdiv要素の間に説明のつかない隙間があるのはなぜですか？[重複］

質問

2つのinline-blockがあります。 div 要素は同じもので、隣り合って配置されています。しかし、マージンが0に設定されているにもかかわらず、2つのdivの間に4ピクセルの謎のスペースがあるようです。 親divが影響しているわけではありません - どうなっているのでしょうか？

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

<イグ

こんな感じにしたいです。

解決方法は？

この例では、あなたの div 要素から block レベル要素から inline 要素で構成されます。の典型的な特徴として inline 要素は、マークアップの空白を尊重することです。このため ギャップ のスペースが要素間に発生します。 (例)

これを解決するために、いくつかのソリューションがあります。

方法1 - マークアップから空白を削除する

例1 - 空白をコメントアウトします。 (例)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

例2 - 改行を削除してください。 (例)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

例3 - 次の行でタグの一部を閉じる (例)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

例4 - 次の行でタグ全体を閉じます。 (例)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

方法2 - リセットする font-size

の間に空白があるため inline 要素によって決定されます。 font-size をリセットすればよいのです。 font-size から 0 というように、要素間のスペースを削除します。

を設定するだけです。 font-size: 0 を親要素で宣言し、新たに font-size を子要素に設定します。これは次のように動作します。 (例)

#parent {
    font-size: 0;
}

#child {
    font-size: 16px;
}

この方法は、マークアップを変更する必要がないため、かなりうまく機能します。しかし、子要素の font-size を使用して宣言されています。 em の単位で表示します。したがって、マークアップから空白を削除するか、あるいは代わりに 要素をフローティングにする によって発生するスペースを回避することができます。 inline 要素で構成されます。

方法3 - 親要素を display: flex

また、場合によっては display 親要素の flex . (例)

の要素間の空白を効果的に削除します。 対応ブラウザ . 追加サポートのために、適切なベンダープレフィックスを追加することを忘れないでください。

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

<div class="parent">
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
    <div>text</div>
</div>

サイドの注意事項

の間のスペースを削除するためにネガティブマージンを使用することは、信じられないほど信頼性がありません。 inline 要素で構成されています。他にもっと最適な解決策があるのなら、ネガティブマージンは使わないでください。