div間の1pxスペース

Question

問題を示すペンを作成しました。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
body { 
 
    background-color: #fffeed; 
 
} 
 
#menu { 
 
    height: 60px; 
 
    border-bottom: 1px solid black; 
 
} 
 
#menu > div { 
 
    border-right: 1px solid black; 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 90px; 
 
    padding: 20px 0; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 
#menu > div > a { 
 
    text-decoration: none; 
 
    color: black; 
 
}

<div id="wrapper"> 
 
    <header> 
 
    <div id="menu"> 
 
     <div><a href="#">bio</a> 
 
     </div> 
 
     <div><a href="#">blog</a> 
 
     </div> 
 
     <div><a href="#">contact</a> 
 
     </div> 
 
    </div> 
 
    </header> 
 
</div>

あなたはChromeデベロッパーツールでメニューをチェックすると、すべてのdivの間の1ピクセルのギャップがあります。 私はボーダーを無効にし、マージンとパディングを0に設定しましたが、私は離れません。 私はそれを修正するためにばかげているか、私は知らない。 私はラインハイトを試しました：0px; vertical-align：top;しかし、私のために働いた人たちのほうがニー。私は大いに助けいただければ幸いです 、

ジョエル

Answer 1

にボーダー幅を設定してみてください

<div id="wrapper"> 
    <header> 
    <div id="menu"> 
     <div><a href="#">bio</a> 
     </div><div><a href="#">blog</a> 
     </div><div><a href="#">contact</a> 
     </div> 
    </div> 
    </header> 
</div> 

</div>

の直後に <div>が始まることに注意してください。オリジナルのマークアップで

---

、これらの点で</div>と<div>原因テキストノード間のあなたの改行やスペース - http://software.hixie.ch/utilities/js/live-dom-viewer/はあなたに何が起こっているのはかなり良いアイデアを提供します。ここではこれらのテキストノードを取り除く質問の空白を削除

セクションのスナップショットです。

---

これらのテキストノードは、（視覚的な書式設定モデルに従って - https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#anonymousを参照してください）匿名インラインボックスを引き起こします。これらの匿名のインラインボックスは包含ブロック（すなわち#menu）のプロパティを継承するので、＃メニューのfont-sizeを0に設定する（リンクされた複製にanswerで提案されているオプションの1つ）も理論的にほとんどのブラウザで）ギャップを取り除きます（子divのフォントサイズを修正する余分なCSSを追加します）

Answer 2

ちょうどあなたがあなたのマークアップを持っている空白を削除して、あなたが良いだろう0

* { 
    margin: 0px; 
    padding: 0px; 
    border-width: 0px; 
}