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

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

虽然您提到子项的内边距可能会有所不同，但我想父项的内边距是一样的，因此您始终可以使用负边距来实现全宽。

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

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

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

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