两个不同的div共享css属性

Question

我为公会创建了一个网站，我在创建这个页面时，我试图在一个div中有一个div，黑暗的div（contentBox）用于保存较轻的div（contentSection），反过来，保持文字。但是，当改变contentSection div的填充时，它也会移动contentBox div。我提供屏幕截图，这样你就可以看到我的意思了。

Html很简单：

    <div class="contentBox">
        <div class="contentSection">
            <h2> We have TeamSpeak!</h2>
        </div>
    </div>

CSS是：

.contentBox{
    background-color: #1E1E1E;
    border-color: #080808;
    border-right-style: solid;
    border-left-style: solid;
    border-width: 1px;
    height: 100vh;
    width: 70%;
    margin: 0 auto;
}
.contentSection{
    background-color: #4B4B4B;
    height: 30%;
    width: 85%;
    margin: 110px auto;
    padding-top: 5px;
    border-radius: 2px;
    padding-left: 15px;
}

我希望它看起来像：

结果如下：

如果我太模糊，我道歉，只要问你是否有疑问。

Answer 1

问题已解决，添加溢出：自动修复问题！

Answer 2

为什么会这样？

您看到的效果是由于利润率下降所致。添加overflow: auto会创建一个新的块格式化上下文，它将边框保留在包含块的边缘内。

添加填充还可以防止边距折叠。在顶部图像中，您有填充，因此h2和内部div上的边距包含在外部块中。在没有填充的情况下，内部元素的边缘会随着外部div的边距而崩溃。

Answer 3

试试这个

没关系？

.contentBox {
  background-color: #1E1E1E;
  border-color: #080808;
  border-right-style: solid;
  border-left-style: solid;
  border-width: 1px;
  height: 100vh;
  width: 70%;
  margin: 0 auto;
}
.contentSection {
  background-color: #4B4B4B;
  height: 30%;
  width: 85%;
  margin: 110px auto;
  padding-top: 5px;
  border-radius: 2px;
  padding-left: 15px;
  padding-top: 50px;
}

<div class="contentBox">
  <div class="contentSection">
    <h2> We have TeamSpeak!</h2>
  </div>
</div>