html - CSS Bulma容器在边距自动上移动内边框

Question

我正在为每个行元素构建一个可折叠的 3 个选项卡，并且在某些分辨率和每个浏览器上的右侧选项卡选择（右边框上的小别名间隙）上都面临对齐问题：

我们使用 flex 和一个简单的 DOM 结构。我们有一个容器（黑色）和两个 div：蓝色的用于处理标签标题，红色的用于处理可折叠内容，如下所示：

问题似乎来自于在蓝色包装器上设置内部 div 的边框。

这是CSS：

* {
  outline: none;
}

html * {
    box-sizing: border-box;
}

.no-margin {
  margin: 0 !important;
}

.container {
    position: relative;
    width: 100%;
    max-width: 993px;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
}

* {
  outline: none;
}

html * {
    box-sizing: border-box;
}

.no-margin {
  margin: 0 !important;
}

.container {
    position: relative;
    width: 100%;
    max-width: 993px;
    margin: 0 auto;
    margin-right: auto;
    margin-left: auto;
}
    .inclusive-tab-container {
      width: 100%;
      margin: 35px auto;

      .inclusive-tab {
        .inclusive-tab-title {
          background-image: url('/static/img/arrow_expand.png');
          background-repeat: no-repeat;
          background-position: 95% 50%;

          &.active {
            background-image: url('/static/img/arrow_collapse.png');
          }
        }

        .box-tab {
          > div {
            position: relative;
            cursor: pointer;
            border-right: 1px solid $light-grey-four;
            border-bottom: 1px solid $light-grey-four;
          }

          > div.active {
            -webkit-animation: fade-in-grey-border $anim-duration-fast both;
            animation: fade-in-grey-border $anim-duration-fast both;
            border: 1px solid $border-color;
            border-bottom: none;
          }

          .blank {
            display: block;
            position: absolute;
            border: 0;
            border-bottom: 8px solid white;
            margin: 0;
            top: 40px;
            width: 100%;
            left: 0;
            z-index: 999;
          }

          a {
            display: inline-block;
          }
        }

        .box-content-wrapper {
          .box-content {
            display: none;
            padding: 20px;
            font-size: 13px;

            &.active {
              display: block;
              border: 1px solid $border-color;
              opacity: 1;
              z-index: 998;
              -webkit-animation: fade-in $anim-duration both;
              animation: fade-in $anim-duration both;
            }

            .addon-selection {
              border: none;
            }
          }
        }
      }
    }

这是可编辑的演示：https ://codepen.io/anthonyvialleton-the-lessful/pen/vaEmoa

它似乎来自 Bulma 容器类的边距自动属性......

标签： htmlcssborderbulma