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变为[[0]以下 div，而不是in div。

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

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

Answer 1

只需将活动类的margin-bttom: -3px;设置为已完成：

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

请参见以下代码段：
 
.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;
    margin-bottom:-3px;
}

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

.role-tab-active {
    margin-bottom:-3px;
    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>

Answer 2

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

给.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，因此，将3px的div溢出并为边框赋予“ div之下的效果”
小提琴：https://jsfiddle.net/c5u3wzv2/5/