は余裕

Question

私はアカウント 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さんのスタイルを追加してみて、何も起こりません。どうして？

Answer 1

width: calc(100% - 22px);をheaderに設定します。これは、境界の2倍（2 * 1px）から2倍のマージン（2 * 10px）を差し引いたもので、最大22pxになります。

div.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    position:relative; 
 
} 
 
    
 
header{ 
 
    width: calc(100% - 22px); 
 
    border: 1px solid green; 
 
    height: 20px; 
 
    margin: 10px; 
 
}

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

Answer 2

私は、子のdivにマージンを使用するのではなく、sugest - 親のdivにを使用しています。あなたのコードスニペットを更新しました。

div.container { 
 
    width: 100%; 
 
    height: 300px; 
 
    border: 1px solid red; 
 
    position:relative; 
 
    padding:10px; 
 
} 
 
    
 
header{ 
 
    width: 100%; 
 
    border: 1px solid green; 
 
    height: 20px; 
 
}

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