web-dev-qa-db-ja.com

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

私は2つのインラインブロックdiv要素を持っています。それらは同じもので、隣同士に配置されています。しかし、マージンが0に設定されているにもかかわらず、2つのdivの間に4ピクセルの不思議なスペースがあるようです。

CSS

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

Div problem

これは私がそれがどのように見えることを望んでいるものです：

What it SHOULD look like

htmlcssmarginpadding
263
Legatro

この場合、あなたのdiv要素はblockレベルの要素からinline要素に変更されました。 inline要素の典型的な特徴は、それらがマークアップの空白を尊重するということです。これは、要素間にgapのスペースが生成される理由を説明しています。 （例）

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

方法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要素間のスペースを削除するために負のマージンを使用することは信じられないほど信頼できません。他の、より最適な解決策がある場合は、マイナスのマージンを使用しないでください。

529
Josh Crozier

inline-blockを使用すると、HTMLに空白を入れることができます。これは通常、.25em（または4px）に相当します。

空白をコメントアウトするか、もっと一般的な解決策として、親のfont-sizeを0に設定し、インラインブロック要素で必要なサイズにリセットすることができます。

34
Paulie_D

inline-blockは、誰もが言っているように自動的にデフォルトのwhite-spaceを設定します。 （これは、要素の「インライン」プロパティによるもので、HTMLマークアップ内のテキスト文字列内の単語間のスペースと同じです。これが、マークアップからwhite-spaceの削除も機能する理由です。）最も簡​​単な修正は、コンテナをfloatすることです。 （例：float: left;）別のメモでは、それぞれのidは一意であるべきです。つまり、同じidを同じHTML文書内で2回使用することはできません。代わりにクラスを使用してください。ここで、複数の要素に同じclassを使用できます。

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

Flexは古いブラウザでは動作しないため、Flexを含まないソリューションを見つけました。例：

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}

.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}

.cols:last-child {
    margin-right:0;
}
1
Larry

境界線を追加するだけです。2px solid #e60000;あなたの2番目のdivタグCSSに。

間違いなく動作します

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}
0
Podile venkata krishna