Fatal编程技术网
  • html/
  • Html 边框底部彼此分离

Html 边框底部彼此分离

html css

Html 边框底部彼此分离,html,css,Html,Css,我一直面临一些HTML代码的问题。问题是我想模拟标签。所选选项卡具有边框底部，选项卡容器也具有边框底部。但在我的默认代码中，它们看起来是分开的 我试着看看标签的div周围是否有空格，但什么都没有 另一个街区 第一 第二 下面是问题的示例：（注意，红色边框与其容器的灰色线分离） 如果修改第18行，而不是0.5rem，则写入0.55rem（这会修改容器顶部框的填充……与容器无关！），它会修复问题 原因是什么 **编辑** 我想要双边框。我不想要的是它们之间的微小空间，如之所以这样，是因为您在.b

我一直面临一些HTML代码的问题。问题是我想模拟标签。所选选项卡具有边框底部，选项卡容器也具有边框底部。但在我的默认代码中，它们看起来是分开的

我试着看看标签的div周围是否有空格，但什么都没有


另一个街区
第一
第二
下面是问题的示例：（注意，红色边框与其容器的灰色线分离）

如果修改第18行，而不是0.5rem，则写入0.55rem（这会修改容器顶部框的填充……与容器无关！），它会修复问题

原因是什么

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

之所以这样，是因为您在.box中实现了.selected，因此
边框
来自。selected位于的
边框
上方。使用
页边距底部：-1px
将从设置
边框
。选择的正好位于框的
边框
上方

你可以查一下

.container{
边框底部：1px纯色灰色；
显示器：flex；
字体大小：14px；
.盒子{
文本对齐：居中；
柔性生长：1；
弹性基准：0；
&.选定{
边缘底部：-1px；
边框底部：1px纯红；
}
}
}
.另一个{
显示器：flex；
填充：0.5rem 0；
}
另一个街区
第一
第二
原因是您在.box中实现了.selected，因此
边框
来自。selected位于框的
边框
上方1px。使用
页边距底部：-1px
将从设置
边框
。选择的正好位于框的
边框
上方

你可以查一下

.container{
边框底部：1px纯色灰色；
显示器：flex；
字体大小：14px；
.盒子{
文本对齐：居中；
柔性生长：1；
弹性基准：0；
&.选定{
边缘底部：-1px；
边框底部：1px纯红；
}
}
}
.另一个{
显示器：flex；
填充：0.5rem 0；
}
另一个街区
第一
第二
正如asobak已经解释过的，您在父对象上应用了一个边框，也在子对象上应用了一个边框，这会产生一个双边框

这里有一个替代解决方案，将
边框底部
放在
框
元素上，而不是
容器

.container{
显示器：flex；
字体大小：14px；
}
.集装箱{
文本对齐：居中；
柔性生长：1；
弹性基准：0；
边框底部：1px纯色灰色；
}
.container.box.selected{
边框底部：1px纯红；
/*或：边框底色：红色*/
}
.另一个{
显示器：flex；
填充：0.5rem 0；
}

另一个街区
第一
第二
正如asobak已经解释过的，您在父对象上应用了一个边框，也在子对象上应用了一个边框，这会产生一个双边框

这里有一个替代解决方案，将
边框底部
放在
框
元素上，而不是
容器

.container{
显示器：flex；
字体大小：14px；
}
.集装箱{
文本对齐：居中；
柔性生长：1；
弹性基准：0；
边框底部：1px纯色灰色；
}
.container.box.selected{
边框底部：1px纯红；
/*或：边框底色：红色*/
}
.另一个{
显示器：flex；
填充：0.5rem 0；
}

另一个街区
第一
第二
在您的情况下，插入框阴影似乎效果更好：

.container{
边框底部：1px纯色灰色；
显示器：flex；
字体大小：14px；
}
.盒子{
文本对齐：居中；
柔性生长：1；
弹性基准：0；
}
.选定{
盒子阴影：0-1px0镶嵌红色；
}
.另一个{
显示器：flex；
填充：0.550；
}

另一个街区
第一
第二
在您的情况下，插入框阴影似乎效果更好：

.container{
边框底部：1px纯色灰色；
显示器：flex；
字体大小：14px；
}
.盒子{
文本对齐：居中；
柔性生长：1；
弹性基准：0；
}
.选定{
盒子阴影：0-1px0镶嵌红色；
}
.另一个{
显示器：flex；
填充：0.550；
}

另一个街区
第一
第二
我终于拿到了。请允许我回答我自己的问题：

关键是我使用了不同的单位，比如
px
和
rem
，而浏览器在划分方面做得并不好

我已经说过
html
和
body
有14px，方框的填充/边距为0.5rem（通常会产生7px，但给出6）

所以我用7px作为边距或填充，瞧

干杯，我终于拿到了。请允许我回答我自己的问题：

关键是我使用了不同的单位，比如
px
和
rem
，而浏览器在划分方面做得并不好

我已经说过
html
和
body
有14px，方框的填充/边距为0.5rem（通常会产生7px，但给出6）

所以我用7px作为边距或填充，瞧

干杯

任何缩放级别被激活？您想要的效果 
.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;
}

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