边框底部相互分离答案

【问题标题】：Border bottom is detached from each other边框底部相互分离
【发布时间】：2019-07-15 15:14:41
【问题描述】：

我遇到了一些 HTML 代码的问题。问题是我想模拟标签。选定的选项卡有一个边框底部，并且选项卡的容器也有一个边框底部。但在我的默认代码中，它们看起来是分离的。

我尝试查看选项卡的 div 周围是否有空格，但什么也没有。

<html>
<body>
<div class="another">
  another block
</div>
<div class="container">
<div class="box">
First
</div>
<div class="box selected">
Second
</div>
</div>
</body>
</html>

.container {
  border-bottom: 1px solid gray;
  display: flex;
  font-size: 14px;

  .box {
    text-align: center;
    flex-grow: 1;
    flex-basis: 0;
    &.selected {
      border-bottom: 1px solid red;
    }
  }
}

.another {
  display: flex;
  padding: 0.5rem 0;
}

这是问题的示例：https://jsfiddle.net/10zqwguh/1/（注意红色边框与其容器的灰线分离）

如果您修改第 18 行，而不是 0.5rem 写入 0.55rem（这会修改容器顶部框的填充...它与容器无关！）它可以解决问题。

这是什么原因？

** 编辑 ** 我想要双边框。我不想要的是它们之间的微小空间，例如

【问题讨论】：

任何缩放级别已激活？
您看到的效果与像素的四舍五入有关。 0.5 rem = 8 像素，但 0.55 rem = 8.8 像素。当然不可能以 0.8 px 绘制任何东西，因此可能会导致绘制的元素有点不同。
@TemaniAfif 不，没有激活缩放，但观察良好

标签： html css

【解决方案1】：

原因是您在 .box 中实现 .selected，因此 .selected 中的border 是 在 .box 的 border 上方 >1px。使用 margin-bottom: -1px; 会将 .selected 中的 border 设置在 .box 的 border 之上。

您可以查看here。

    .container {
      border-bottom: 1px solid gray;
      display: flex;
      font-size: 14px;

      .box {
        text-align: center;
        flex-grow: 1;
        flex-basis: 0;
        &.selected {
          margin-bottom: -1px;
          border-bottom: 1px solid red;
        }
      }
    }

    .another {
      display: flex;
      padding: 0.5rem 0;
    }

    <html>

      <body>
        <div class="another">
          another block
        </div>
        <div class="container">
          <div class="box">
            First
          </div>
          <div class="box selected">
            Second
          </div>
        </div>
      </body>

     </html>

【讨论】：

【解决方案2】：

正如 asobak 已经解释的那样，您在父级以及子级上都应用了边框，这会产生双边框。

这是一个替代解决方案，将border-bottom 放在.box 元素上，而不是.container

.container {
  display: flex;
  font-size: 14px;
}

.container .box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  border-bottom: 1px solid gray;
}

.container .box.selected {
  border-bottom: 1px solid red;
  /* or: border-bottom-color: red; */
}

.another {
  display: flex;
  padding: 0.5rem 0;
}

<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

【讨论】：

哦，我想要双边框。困扰我的是他们之间的空间

【解决方案3】：

在您的情况下，插入框阴影似乎效果更好：

.container {
  border-bottom: 1px solid gray;
  display: flex;
  font-size: 14px;
}

.box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
}

.selected {
  box-shadow: 0 -1px 0 inset red;
}

.another {
  display: flex;
  padding: 0.55rem 0;
}

<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

或者在元素上使用边框而不接触容器：

.container {
  display: flex;
  font-size: 14px;
}

.box {
  text-align: center;
  flex-grow: 1;
  flex-basis: 0;
  border-bottom:1px solid grey;
}

.selected {
  box-shadow:0 -1px 0 inset red;
}

.another {
  display: flex;
  padding: 0.55rem 0;
}

<div class="another">
  another block
</div>
<div class="container">
  <div class="box">
    First
  </div>
  <div class="box selected">
    Second
  </div>
</div>

【讨论】：

这是一个聪明的解决方案，但我仍然能够看到 div 之间的空间
@kai hmm .. 我尝试了不同的缩放级别，但我没有看到它带有框阴影，但我看到它带有边框。会尝试别的东西

【解决方案4】：

我终于明白了。请允许我回答我自己的问题：

关键是我使用了不同的单位，例如px 和rem，而浏览器在分割方面表现不佳。

我已经说过html和body有14px，盒子的填充/边距是0.5rem（通常会产生7px，但它给出了6。）

所以我所做的就是使用 7px 作为边距或填充，瞧。

干杯

【讨论】：