div之间的CSS 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之间会有1px的差距。 我禁用了边框，将边距和填充设置为0，但我不会消失。 要么是愚蠢修复它，要么我不知道。 我尝试了行高：0px;和vertical-align：top;但那些为我工作的人。 我非常感谢帮助，

乔尔

Answer 1

尝试将border-width设置为0。

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

Answer 2

只需删除标记中的空白即可，

<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/让您非常了解＆＃39;继续这是相关部分的快照

删除空格会删除这些文本节点。

这些文本节点会导致匿名内联框（根据可视化格式模型 - 请参阅https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#anonymous）。这些匿名内联框继承了包含块的属性（即#menu），这就是为什么将#men上的font-size设置为0（answer中建议的一个选项到链接副本的原因）理论上也会得到（实际上对于大多数浏览器来说）摆脱差距（添加额外的CSS来纠正子div的字体大小）