如何忽略父元素的填充

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/

Answer 2

您只需将宽度设置为大于填充，然后设置填充之前的起点。

https://jsfiddle.net/tzq3o6tx/1/

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

.line {
  border-top: 1px solid black;
  width: 240px;
  margin-left: -20px;
}