html - 如何忽略父元素的填充

Question

有没有办法显示完整的边框 class="line"在不修改 html 的情况下忽略/排除填充？

例如:

<div class="padding">
 <section>
     <p>text</p>
  </section>

  <div class="line"> </div>

   <section>
     <p>text</p>
  </section>
</div>

CSS:

.padding {
  padding: 20px;
  border: 1px solid black;
}

.line {
  border-top: 1px solid black;
}

演示:https://jsfiddle.net/tzq3o6tx/

我想要 <div class="line"> </div>边框与填充重叠。

Answer 1

只需在 .line 上添加负边距，如下所示:

.line {
    border-top: 1px solid black;
    margin:0 -20px;
}

https://jsfiddle.net/tzq3o6tx/3/