header
のマージンを考慮して
header
realtive
conatiner
に幅の幅を設定したい
の存在と親に子供の幅の相対を設定しは余裕
div.container {
width: 100%;
height: 300px;
border: 1px solid red;
position:relative;
}
header{
width: 100%;
border: 1px solid green;
height: 20px;
margin: 10px;
}
<div class="container">
<header></header>
</div>
けどheader
要素は、右側の数ピクセルでコンテナの境界から出てきます。
box-sizing: border-box;
にheader
さんのスタイルを追加してみて、何も起こりません。どうして?
はなぜボックスサイジングは、この場合には動作しませんか? – maks
は、ボックスサイズ設定(border-box、content-box、padding-box)で使用可能な設定のいずれも考慮していないため、余白は要素の外にあります。 – Johannes
幅を計算するよりエレガントな方法はありますか?後でマージンを変更したり、パディングを追加したい場合はどうすればよいですか?私は 'calc'関数も変更する必要があります。 – maks