div下的活动标签边框底部，而不是div中

Question

我制作了一个带有2个标签的标签包装器。在标签下，我有一个div内容。

这是我的代码：

.tab-wrapper {
  width: auto;
  padding-left: 17px;
  background-color: aqua;
  white-space: nowrap;
  display: table-cell;
}

.content {
  background-color: aqua;
}

.role-tab {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-right: 19px;
}

.role-tab>p {
  display: table-cell;
  height: 50px;
  overflow: visible;
  vertical-align: middle;
  width: 100%;
}

.role-tab-active {
  border-bottom: 3px #108DE7 solid;
  font-weight: bold;
}

<div class="tab-wrapper">
  <div class="role-tab role-tab-active">
    <p>Role tab 1</p>
  </div>
  <div class="role-tab">
    <p>Role tab 2</p>
  </div>
</div>
<div class="content">
  <p>Content</p>
</div>

样式和一切正常。现在，我想添加一些padding-top，以便使border-bottom进入div下。这是我想要的屏幕截图：

我希望border-bottom位于div下方 ，而不是 div中。

我尝试了margin-top，padding-top和top，但没有用

当选项卡处于活动状态时，如何将border-bottom放在div下面而不是里面？

Answer 1

您不能通过填充和边距移动边框。它不是元素，而是元素的一部分。

为.tab-wrapper提供一个静态高度，而不是默认的auto。无论边框的大小如何，包含div都会对其进行调整，因此我们将其设置为静态高度以允许溢出。然后将其设为display:flex。

.tab-wrapper {
    width: auto;
    padding-left: 17px;
    background-color: aqua;
    white-space: nowrap;
    display: flex; 
    height: 50px;
}

您可以看到父项和标签项的高度均为50px，但渲染时并非如此。 box-sizing: content-box是默认的CSS属性，您的官方活动角色标签高度为53px，因此，div溢出了3px，并使边框具有“ div之下”的效果

提琴：https://jsfiddle.net/c5u3wzv2/5/

Answer 2

只需为活动类设置of(1,2,3).map(x => x + 1).filter(x => x > 2); 并完成操作即可：

npm run build -- --stats

请参见以下代码段：

margin-bttom: -3px;

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}