回答:
簡単な修正、ただ行う
margin:-10px時間に。
画像の目的のために、あなたはこのようなことをすることができます
img {
width: calc(100% + 20px); // twice the value of the parent's padding
margin-left: -10px; // -1 * parent's padding
}この質問には大部分が回答されていますが、一部では全員が回答しています。私はこれを少し前に扱いました。
パネルの下部にボタントレイを配置し、パネル全体を30ピクセルにしたかったのです。ボタントレイは、底面と側面が揃っていなければなりません。
.panel
{
padding: 30px;
}
.panel > .actions
{
margin: -30px;
margin-top: 30px;
padding: 30px;
width: auto;
}私はここでアイデアを推進するためにもっと肉付きのデモを行いました。ただし、上記の主要な要素は、子の負のマージンに一致する親のパディングをオフセットしています。次に、子を全幅で実行する場合に最も重要であり、幅をautoに設定します。（上記のschlingelのコメントで述べたように）。
ちょっと遅くなりますが、少し計算が必要です。
.content {
margin-top: 50px;
background: #777;
padding: 30px;
padding-bottom: 0;
font-size: 11px;
border: 1px dotted #222;
}
.bottom-content {
background: #999;
width: 100%; /* you need this for it to work */
margin-left: -30px; /* will touch very left side */
padding-right: 60px; /* will touch very right side */
}
<div class='content'>
<p>A paragraph</p>
<p>Another paragraph.</p>
<p>No more content</p>
<div class='bottom-content'>
I want this div to ignore padding.
</div>私はWindowsを持っていないので、IEでこれをテストしませんでした。
フィドル： フィドルの例..
親は120px幅です。つまり、幅100ピクセル+両側に20個のパディングがあるため、線を120px幅にする必要があります。これがコードです。次回は、パディングによって要素の幅が増えることに注意してください。
#parent
{
width: 100px;
padding: 10px;
background-color: Red;
}
hr
{
width: 120px;
margin:0 -10px;
position:relative;
}width: auto;しhrます。jsfiddle.net/ToolmakerSteve/7p85dsrq/3 残念ながら、このソリューションではpadding、親によって設定された知識が必要です。
問題は、使用しているボックスモデルに起因する可能性があります。IEを使用していますか？
IEが互換モードの場合、widthはボックスの外側の幅です。つまり、パディングは内側になります。したがって、ボックス内に残っている総面積は100px - 2 * 10px = 80px、100px幅で<hr>は正しく見えません。
標準モードの場合、widthはボックスの内側の幅であり、パディングは外側に追加されます。したがって、ボックスの合計幅は、ボックスの100px + 2 * 10px = 120px内側にちょうど100pxを残します<hr>。
これを解決するには、IEのCSS値を調整します。（Firefoxで確認して、問題がないか確認してください）。またはさらに良いことに、ブラウザを厳密モードに起動するようにドキュメントタイプを設定します。IEも標準のボックスモデルに従います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
...垂直パディングを持つ親コンテナーがあり、そのコンテナー内に何か（たとえば画像）がその垂直パディングを無視するようにしたい場合は、「上」と「下」の両方に負であるが等しいマージンを設定できます。
margin-top: -100px;
margin-bottom: -100px;実際の値はそれほど重要ではないようです。水平パディングにはこれを試していません。
これを行う別の方法を次に示します。
<style>
.padded-element{margin: 0px; padding: 10px;}
.padded-element img{margin-left: -10px; width: calc(100% + 10px + 10px);}
</style>
<p class="padded-element">
<img src="https://images.pexels.com/photos/3014019/pexels-photo-3014019.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940">
</p>ここrepl.it上のいくつかの例は次のとおりです。https://repl.it/@bryku/LightgrayBleakIntercept
<hr>であり、divの最後から20pxになります。私の意味については、このjsFiddleを参照してください：jsfiddle.net/YVrWy/1