网页子元素意外右侧边距及分隔器无颜色问题求助

问题代码 #

CSS #

.shwph-tab {
  background-image: linear-gradient(to right bottom, #ffffff, #f0fbff, #ccfdff, #a4ffff, #94ffe3);
  background-size: cover, cover;
  width: 600px;
  height: 300px;
  border: 5px grey ridge;
  padding: 0 40px 40px 40px;
}

.shwph-tab-separator {
  width: 3px;
  background-color: #00979c;
  margin: 0 20px;
}

.shwph-tab-left-side {
  width: 30%;
}

.shwph-tab-right-side {
  width: calc(70% - 43px)
}

.h-90p {
  height: 90%;
}

.longsec-child-preset-2 {
  min-height: 74vh;
}

.c-white {
  color: white;
}

.w-100p {
  width: 100%;
}

.fx {
  display: flex;
}

.fx-ai-c {
  align-items: center;
}

.fx-jc-c {
  justify-content: center;
}

.fx-dir-c {
  flex-direction: column;
}

.min-padding {
  padding: 10vh 0;
}

.bs-bb {
  box-sizing: border-box;
}

.brad-3px {
  border-radius: 3px;
}

HTML #

<section class="longsec-child-preset-2 c-white w-100p fx fx-jc-c fx-ai-c fx-dir-c min-padding bg-shwph bgs-full">
  <div class="shwph-tab fx fx-ai-c fx-dir-c bs-bb">
    <div>

    </div>

    <div class="h-90p w-100p">
      <div class="shwph-tab-left-side fx fx-ai-c fx-jc-c h-100p">

      </div>
      <div class="shwph-tab-separator brad-3px h-100p"></div>
      <div class="shwph-tab-right-side h-100p fx fx-ai-c fx-jc-c">

      </div>
    </div>
  </div>
</section>

问题描述 #

1. 带有h-90p和w-100p类的元素出现意外右侧边距，尺寸等于父元素宽度减去自身宽度；
2. 类为shwph-tab-separator的分隔器无法显示设置的背景色。

已排除JS、PHP等外部代码干扰，尝试过禁用样式、删除兄弟元素、修改父元素属性等方法均未解决。

解决方案 #

问题1：修复意外右侧边距 #

原因：父元素.shwph-tab设置了左右各40px的padding，但目标子元素未启用box-sizing: border-box，width:100%仅按父元素的内容宽度计算，加上padding后超出容器范围，导致右侧出现边距。

修复：给该元素添加bs-bb类，让宽度计算包含内边距：

<div class="h-90p w-100p bs-bb">

问题2：修复分隔器颜色不显示 #

原因：分隔器的父元素未启用flex布局，三个子元素无法横向排列；且分隔器的height:100%在普通块级父元素中无法生效，空元素高度为0，导致背景色不可见。

修复：给父元素添加fx和fx-ai-c类，启用flex布局并垂直居中元素：

<div class="h-90p w-100p bs-bb fx fx-ai-c">

完整修改后HTML #

<section class="longsec-child-preset-2 c-white w-100p fx fx-jc-c fx-ai-c fx-dir-c min-padding bg-shwph bgs-full">
  <div class="shwph-tab fx fx-ai-c fx-dir-c bs-bb">
    <div>

    </div>

    <div class="h-90p w-100p bs-bb fx fx-ai-c">
      <div class="shwph-tab-left-side fx fx-ai-c fx-jc-c h-100p">

      </div>
      <div class="shwph-tab-separator brad-3px h-100p"></div>
      <div class="shwph-tab-right-side h-100p fx fx-ai-c fx-jc-c">

      </div>
    </div>
  </div>
</section>

内容的提问来源于stack exchange，提问作者KawkaGaming