Boxモデルを理解して余白をデザイン

HTMLの要素はすべて四角い箱として扱われcontentとpaddingとborderとmarginで構成されます。この考え方をボックスモデルと呼びます。どこまでが要素の内側でどこからが外側の余白なのかを理解していないとレイアウト調整で迷いやすくなります。

paddingとmarginの違い

paddingは要素内部の余白で背景色と一体になります。一方marginは要素外側の余白で隣り合う要素との距離を調整します。同じ余白でも役割が異なるためデザインの意図に合わせて使い分けることが大切です。

See the Pen Boxモデルを理解して余白をデザイン by Syo Yanai (@h1-tech-japan) on CodePen.

box sizingで幅の計算を楽にする

CSSでbox sizingをborder boxにしておくと指定した幅の中にpaddingとborderが含まれるようになります。特にカードレイアウトなどで横幅をそろえたい時に便利な設定です。リセットCSSや共通スタイルで全要素に指定しておくと余白調整がスムーズになります。