子供が親の幅を正しく超えさせる方法は？

Question

I親（コンテナ）と子（H1ヘッダ/ブロック）を有します。

.container { 
    width: 1024px; 
} 
#h1 { 
    width: 1024px; 
    padding: 0 30px 0 30px; 
    background-color: something; 
} 

問題ではなく、右に親のうち、左に30個のピクセル、30個のピクセルを伸ばすのではなく、右に60個のピクセルを伸ばす、何らかの理由です。 は、今私は戻って、それを引いても、それを作るために-30pxの負の左マージンを設定し、それを行うには良い/適切な方法がある場合、私は不思議でしたか？

これは何が起こるかの写真です：

これは私がそれのように見える（と、それは負のマージンを持つように見えるようになった）したいものの絵です：

Answer 1

負のマージンは完全に罰金です。または、絶対位置と相対位置を使用してプログラム的に配置することもできます。

CSS

.container { 
    background: crimson; 
    height: 600px; 
    margin: 0 auto; 
    width: 300px; 
} 

.header { 
    background: purple; 
    height: 100px; 
    left: 0; 
    margin: 60px auto; 
    padding: 0 30px; 
    position: absolute; 
    right: 0; 
    width: 360px; 
} 

HTML

<div class='container'> 
    <div class='header'></div> 
</div> 

Codepen example.

Answer 2

負のマージンは本当にこの場合に行くための唯一の方法である（といくつかのケースの一つであります私はそれが許容される使用と考えています）。

あなたが探検ことができ、他のソリューション（例えば、中央に整列BG画像として設定赤いBGを持って、その後h1外のコンテンツのためのパディングとdiv年代を持っている）がありますが、何のボーナスは負を使用しての上にこれを行うには本当にありません実際に長期的にはそれは維持しにくい。すでに示唆されているとおり

、あなたもこれを解決するためにポジショニングを使用することができます（以下の例を参照）。

HTML：

<div class="container"> 
    <p>Lorem ipsum dolor sit amet</p> 
    <p>Lorem ipsum dolor sit amet</p> 
    <h1>testing, testing, 1 2 3</h1> 
</div> 

はCSS：残念ながら

.container { 
    background: #f00; 
    margin: 0 0 0 20px; 
    padding: 100px 0; 
    position: relative; 
    width: 400px; 
} 

h1 { 
    background: #00f; 
    color: #fff; 
    left: -20px; 
    padding: 0 20px; 
    position: absolute; 
    width: 100%; 
} 

http://jsfiddle.net/d7KJ9/4/

h1後にコンテンツを追加すると、この方法を破るように見えるけれども：

http://jsfiddle.net/d7KJ9/2/

上記の方法は、作業をした場合はさらに、それは必ずしもネガティブマージンを（それが実際にはより多くのCSSを必要とする）を使用したよりも良くなることはないでしょう。適切に使用する場合

結論として、単に負のマージンのソリューションを行く、負のマージンは（あなたが欲しいものを達成するためのより良い方法があり、それらを使用する前に、自分にだけの理由は、必ずしも悪いことではありませんか？）

Answer 3

あなたは#h1にposition:relativeし、その後leftを使用することができますとabsolute`：

.container { 
    width: 400px; 
    height: 500px; 
    background: red; 
    margin: 0 auto; 
} 

#h1 { 
    width: 400px; 
    height: 40px; 
    left: -30px; 
    background: blue; 
    padding: 0 30px; 
    position: relative; 
    top: 40px; 
} 

は、負のマージンを使用してJSBin