Html CSS div之间的1px空间

我已经做了一支笔来说明这个问题

*{
保证金：0；
填充：0；
}
身体{
背景色：#fffeed；
}
#菜单{
高度：60px；
边框底部：1px纯黑；
}
#菜单>div{
右边框：1px纯黑；
显示：内联块；
高度：20px；
宽度：90px；
填充：20px0；
文字装饰：无；
文本对齐：居中；
位置：相对位置；
}
#菜单>分区>a{
文字装饰：无；
颜色：黑色；
}

---

尝试将边框宽度设置为0

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

---

只需删除标记中的空白，就可以了

<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>

请注意，

在

---

在原始标记中，

和

之间的换行符和空格会在这些点上产生文本节点，这让您非常清楚发生了什么。这是有关部分的快照

删除空白将删除这些文本节点

---

---

这些文本节点会导致匿名内联框（根据可视格式模型-请参阅）。这些匿名内联框继承了包含块（即#菜单）的属性，这就是为什么将#菜单上的

font size

设置为0（链接副本中建议的选项之一）在理论上（实际上对于大多数浏览器）也可以消除间隙的原因（添加额外的CSS以更正子div的字体大小）

这是一个空白，为什么不把这个问题作为一个重复的问题来结束呢？到目前为止，你已经有足够的代表意识到这种问题是经常被问到的。在回答之前，请确保你做了尽职调查并搜索以确保问题不是重复的。很抱歉重复了，我不打算这样做。但是你能向我解释为什么spa会这样做吗“中间的ce算作空白吗？@huhnmonster-我对答案做了更多的解释。希望能有所帮助。干杯！@potatopeelings非常感谢你，这让你更容易理解。：）