CSS初学者がきちんと理解したい、marginとpaddingとborderの複雑な関係



2017年05月24日 17時02分更新

記事提供:WPJ

本文印刷

marginとpaddingはCSSの基本ですが、正確に理解できていないと「レイアウト崩れ」にもつながります。この春CSSを学び始めた方へ、必読の解説記事です。

CSSを学び始めたばかりのころ、marginプロパティとpaddingプロパティに混乱しました。そっくりに感じただけでなく、同じ表示になっているとさえ思えました。

このチュートリアルでは、CSSにおけるmarginとpaddingの違いと、Webページでの余白への影響について解説します。さらにマージンの相殺(margin collapsing)やレスポンシブWebサイトの作成でさまざまな単位を使った場合の効果について説明し、最後にCSSのmarginと paddingを使って実現できるレイアウトテクニックをいくつか紹介します。

ボックスモデル

CSSは、要素を四角形のボックスで表します。四角形のサイズは次の要素で指定します。

この記事をWPJのサイトで読む

Related Post