css - 幅の問題を継承する子要素

Question

だから私はこの奇妙な問題を抱えています。コンテナ内に要素があり、それがconatinerから幅を継承しています。

これを修正するには、csswidthプロパティを任意に設定します。ブラウザでプレビューに行くと、幅が適切に調整されていますが、コンテナを埋めるために右マージンが拡張されています。

私はmargin-right：0;のようなことをすることによってこれを相殺しようとしました。または負の値を使用していますが、何も機能していません

Answer 1

子の幅が親から継承されることはありません（親で指定された正確な値）。ただし、それは親の幅に依存します。親に幅を指定し、ブロックレベルの子がある場合、それは常に親の幅の100％に拡張されます。これは完全に正常な動作です。

子要素に明示的な幅を設定する場合は、そのパディングと境界線が合計幅に考慮されないことに注意する必要があります（標準のボックスモデルを使用）。2つのオプションがあります。

• パディングを説明する
• ボックスモデルを変更する

css：

#parent{
   width:100px;
}
#child{
   padding:10px;
   width:100px;   /* child will be 20px too wide */
}
/*method 1*/
#child{
   padding:10px;
   width:80px;   /* child will fit perfectly: 80px +10px + 10px */
}
/* method 2*/
#child{
   padding:10px;
   width:100px;
   box-sizing:border-box;      /* child will fit perfectly
                               width now includes content and padding */
   -moz-box-sizing:border-box; /* for compatibility*/
   -webkit-box-sizing:border-box;
}

ただし、これbox-sizingは新しいcssプロパティであり、すべてのブラウザで処理できるわけではないことに注意してください。