HTML/CSS - 我找不到的 Phantom Margin

Question

我正在我的网站上创建一个菜单栏。我的问题是我的一个菜单项旁边有一个小边距。（我通过在容器中添加 background-color: black; 来强调这一点。）我正在使用 safari。

CSS:

.testMenuOption{
  width: calc(100%  /3);
  height: 100%;
  float: left;
  margin:auto;
  background-color: white;
  display: table;
}

有人可以告诉我我的问题是什么吗？我试过删除文本，但问题不大。

Answer 1

由于您使用 100/3 计算宽度，因此会出现舍入误差，因此宽度不会再次相加 100%。您可以做的是将两个 .menuOptionsWraps 的宽度设置为 33%，一个设置为 34%。

例如这样做：

.menuOptionSelectedWrap {
    float: left;
    width: 33%;
    height: 100%;
    margin: auto;
    margin-right: -4px;
    background-color: #d6eef2;
    display: table;
}
.menuOptionSelectedWrap:last-of-type {
    width: 34%;
}

Answer 2

我不确定你说的是什么，当 window resize.check 你的 css, width: calc(100% /3); 改成3，你就明白了。

HTML/CSS - 我找不到的 Phantom Margin

HTML/CSS - Phantom Margin which I can not find

html

css

border

margin