0

2 つの div 要素が並んでいますが、何らかの理由でそれらの間に数ピクセルのマージンがあります。

Chrome の開発ツールによると、これらの div にマージンの継承がないため、理由がわかりません。

これは私が得る出力です:

ここに画像の説明を入力

私のHTML：

<div class="wrap">
<div class="menu_wrap center">
     <div class="row">
         <div style="width:200px;" class="display vdisplay brdr">Name</div>
         <div style="width:100px;" class="display vdisplay brdr">Surname</div>
     </div>
</div>
</div>

可能な継承属性を含む私の CSS は次のとおりです。

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body{   
    padding:0px;
    margin:0px;
}
.wrap{
    margin:0 auto;
    width:900px;
    background-color:#adadad;
    padding-top:30px;
}
.center{
  margin:0 auto;  
}
.display{
  display:inline-block;
}
.vdisplay{
   vertical-align:top;
}
.menu_wrap{
   width:850px;
}
.row{       
  margin-bottom:3px;
  border:1px solid black;
  width:100%;
}
.brdr{
   border:1px solid black;
}

それらが継承する可能性のあるすべての関連要素を含めましたが、なぜこのギャップが続くのかはまだわかりません! それは私を夢中にさせます！

このギャップがどこから来ているのか説明できる人はいますか?

4

2 に答える 2

4

HTML で同じ行に要素を設定する場合、少し奇妙な動作があります。この問題とその解決策に関する非常に優れた記事がここにあります。

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

しかし、私はあなたに簡単な要約を与えます：

基本的に、同じ行に配置された要素には常にスペース (約 5px) があります。このスペースは、マージンやパディングが原因ではありません。文字通り単なるスペースです。その記事では、著者はそれを単語間にスペースを入れることと同一視しましたが、これがおそらくそれを考える最良の方法だと思います.

解決策としては、通常、コード内の要素の間に改行を入れないことが最善の方法だと思います。明らかに、それは少し厄介なことにつながる可能性がありますが、次のようなことを行うことでそれを回避できます。

<div style="width:200px;" class="display vdisplay brdr">Name
</div><div style="width:100px;" class="display vdisplay brdr">Surname</div>

前の要素の終了タグが次の要素の開始タグと同じ行にある場所。

他のオプションには、スペースを打ち消すために負のマージンを設定すること、またはfloat代わりに使用することなどが含まれます。ただし、CSS ソリューションは少しハッキリしていると思います。問題を解決しようとするよりも、問題を回避したいと考えています。

于 2013-11-08T02:23:04.697 に答える
2

コンテナに追加するfont-size: 0;と、この問題が修正されます。

于 2013-11-08T02:23:38.063 に答える