如何忽略父类的填充以显示全宽的子类

Question

此html代码包含一个名为parent的div容器，其中包含一个div容器child。

我希望以全宽显示班级child，以便代码段中的红色框显示红色而不是左右两侧的当前蓝色。

当然可以在CSS中设置left: -15px;和right:-15px;来实现这一点，但在我的情况下，框尺寸和填充会有所不同。

最好的方法是忽略我的parent类的填充。但这可能吗？或者你能推荐我的另一个提示吗？

.parent {
  background: blue;
  padding: 15px;
}

.child {
  background: red;
  padding: 15px;
}

<div class="parent">
  <div class="child">
    Hello World. May you help me?
  </div>
</div>

Answer 1

虽然您提到儿童衬垫可能会有所不同，但我认为父母的衬垫会相同，所以您总是可以使用负边距来实现全宽度。

＆＃13;

＆＃13;

.parent {
  background: blue;
  padding: 15px;
}

.child {
  background: red;
  padding: 15px;
  margin-left: -15px;
  margin-right: -15px;
}

.second{
  padding: 15px 30px;
  margin-top: 10px;
}

＆＃13;

<div class="parent">
  <div class="child">
    Hello World. May you help me?
  </div>
  
  <div class="child second">
    Of course I would.
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;