CSS 1像素间隔的div

Question

CSS 1像素间隔的div

3

我已经制作了一个笔来展示这个问题。

* {
  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，但它仍然存在。要么我太蠢了无法解决它，要么我不知道该怎么做。我尝试了line-height: 0px; 和vertical-align: top;，但都没有起作用。我非常感谢您的帮助，Joel。

- huhnmonster

2

它是关于空格的问题 https://dev59.com/Dm445IYBdhLWcg3wBVzz - Nenad Vracar

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chriswirz · Answer 1

尝试将边框宽度设置为0。

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

- potatopeelings · 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/可以让您对正在发生的事情有一个很好的了解。以下是相关部分的快照。

去除空格会清除这些文本节点。

这些文本节点会导致匿名内联框（根据视觉格式模型 - 请参见https://www.w3.org/TR/2011/REC-CSS2-20110607/visuren.html#anonymous）。这些匿名内联框继承包含块（即#menu）的属性，这就是为什么将#menu上的font-size设置为0（链接重复项中建议的选项之一）也会理论上（对于大多数浏览器实际上也是如此）消除间隙（还需要额外的CSS来纠正子div的字体大小）。