☰

これらのインラインブロック div 要素の間に説明できないギャップがあるのはなぜですか? [重複] 質問する

tag-icon • tag-icon html css margin padding
これらのインラインブロック div 要素の間に説明できないギャップがあるのはなぜですか? [重複] 質問する

同じインライン ブロックdiv要素が 2 つあり、それらは隣り合って配置されています。しかし、マージンが 0 に設定されているにもかかわらず、2 つの div の間に 4 ピクセルの不思議なスペースがあるようです。親 div はそれらに影響を与えていません。何が起こっているのでしょうか。

CS

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

除算問題

私が望むのはこんな感じです:

それはどのように見えるべきか

ベストアンサー1

この例では、要素はレベル要素divから要素に変更されています。要素の一般的な特性は、マークアップ内の空白を尊重することです。これが、要素間にスペースのギャップが生成される理由です。blockinlineinline（例）

この問題を解決するために使用できる解決策はいくつかあります。

方法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-size0

親要素に設定し、子要素に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。他のより最適な解決策がある場合は、負のマージンを使用しないでください。

おすすめ記事