css_html/css_WEB-ITnose のマージンとパディングの違い

前に書いてあります

私は最近、面接中に遭遇した質問を整理しています。その1つは、マージンとパディングの違いです。その時言ったことで要点は明確になったのですが、まだ少し混乱していたのでもう一度確認してみました。これまでにまとめた内容と合わせて、より詳細な検討を行いました。

【HTML/CSS】ボックスモデル、ブロックレベル要素、インライン要素

【HTML/CSS】margin属性の使い方

違い

①margin:は外側のスペース、padding:は内側のマージンです。たとえば、2m×2mの家が2軒あり、家の間に距離があります。このとき、あなたは家の 1 つの真ん中に座っています。あなたとその家の壁の間には距離があります。これは CSS パディングとして理解できます。あなたの家と別の家の間の距離はマージンです

② たとえば、テーブルの上にボックスがあり、そのボックスの中にオブジェクトが配置されているとします。このボックスとそのボックスの間の距離は、要素または DIV であると考えてください。内部のコンテンツはパディングであり、このボックス内のテーブルの端からの距離はマージンです

③

www.soojs.com

padding-top: div からの www.soojs.com の高さ margin-left: 本文からの div の幅です。

まとめ

調べたCSSにおけるmarginとpaddingの違いは、比較することで区別しやすくなりました。