インラインブロックCSSが要素を全幅にするのに失敗しました

Question

私はクラスをフルブリードにしたいですが、私はカントしません。

<div class="main-class"> 
    <div class="background"> 
    <p>some info in the background</p> 
    </div> 
    <div class="content"> 
    <p>Some random content</p> 
    </div> 
</div> 

とCSS：ここ

はHTMLですhttps://jsfiddle.net/uumkjLy8/1/

背景クラスはバックグラウンドでフルブリードでなければなりませんが、中に見られるように：

.main-class{ 
    padding: 20px; 
    width: 100%; 
    background-color: #fff; 
    display: inline-block; 
    box-sizing: border-box; 
} 
.background{ 
    margin: -20px; 
    background-color: #eee; 
    display: inline-block; // must use inline-block 
    width: 100%; 
    padding: 20px; 
    box-sizing: border-box; 
} 
.content{ 
    margin-top: 30px; 
} 

、ここではデモですデモには右側に空白があります。

Answer 1

バックグラウンド要素は、パディングを持つ要素の内部にあります。つまり、親要素（width> 100％など）の外側にある何らかの「チーズ」メソッドを拡張すると、 。それだけでのdivを移動しているため

あなたの負のマージンは、それを拡大していない、幅を修正するつもりはありません。 100％の幅と、パディングを持つ親の場合、は決しての親の幅を完全にカバーします。

はこのフィドルしてくださいを参照してください。 https://jsfiddle.net/uumkjLy8/6/私は .main-classからパディング、だけでなく、あなたの .backgroundにマイナスのマージンを削除した

。

Answer 2

これはのように簡単なことができ.background

https://jsfiddle.net/uumkjLy8/8/

Answer 3

からbox sizingを削除します。あなたはその冗長CSSの一部を使用するように強制されない限り

.main-class { 
 
    background-color: #fff; 
 
} 
 
.content, 
 
.background { 
 
    padding: 20px; 
 
} 
 
.background { 
 
    background-color: #eee; 
 
}

<div class="main-class"> 
 
    <div class="background"> 
 
    <p>some info in the background</p> 
 
    </div> 
 
    <div class="content"> 
 
    <p>Some random content</p> 
 
    </div> 
 
</div>

... ..
あなたの質問にそのような場合を明記してください。

Answer 4

私はあなたがパディングを必要としないと思います：.backgroundクラスで-20px。さらに、.contentクラスにpadding：20pxを追加して、バックグラウンドで整列させます。