親要素のパディングを無視する方法

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に負のマージンを追加：pと行します。https：

.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; 
}