CSSで要素の余白を表すmarginとpaddingについて正しく理解する - ウェブランサー

要素の余白を決定するmarginとpadding CSSには要素の余白を表すプロパティとしてmarginとpaddingが用意されています。この二つのプロパティは、ボックス・モデルにおいて固有の範囲を持ち、専用の面積を作り出すことができます。 marginは要素の外側の余白を表し、paddingは要素の内側の余白を表します。これらの間には、境界線であるborderが挟まれています。この全てが、内容を配置するコンテンツ・ボックスを取り囲んでおり、寸法を広げると外側へ向かって拡大します。 本来、widthとheightは純粋に内容が配置されるコンテンツ・ボックスの寸法を表します。これを理解しないままレイアウトを行うと、想定したサイズに合わなかった要素が、親要素からはみ出したり崩れた状態で表示されます。 また、垂直方向の余白は状況に応じて折りたたまれることがあるため、指定したmarginが期待し

[m6u]

widthはpadding分を引かないと。