Elementor でデザインをしていて、「要素の間にすき間を空けたいけど、マージンとパディングのどちらを使えばいいの？」と迷ったことはありませんか？適当に数値をいじっていると、スマホ表示でレイアウトが崩れる原因になってしまいます。今回は、Webデザインの基礎であり、初心者が必ずつまずく「余白の絶対ルール」を分かりやすく解説します！
決定的な違いは枠の「外」か「内」か
Elementor の [ 高度な設定 ] タブにあるマージンとパディング。この2つの違いは、要素の境界線（枠）に対して、外側にすき間を作るか、内側にすき間を作るかです。
-
マージン（Margin）
＝ 枠の「外側」の余白： 隣り合う別のウィジェット（画像や見出しなど）との間に距離を取り、要素同士を遠ざけたい時に使います。 -
パディング（Padding）
＝ 枠の「内側」の余白： 要素の枠線から、中のコンテンツ（文字など）までの距離を取ります。要素そのものを内側から膨らませるイメージです。
視覚的に理解！背景色をつけてみる
言葉だけでは少し分かりにくいですよね。どちらを使うべきか迷った時は、対象のウィジェットに背景色を設定してみるのが一番の解決策です。
例えば、セクション自体の背景を青、見出しウィジェットの背景を赤に設定し、見出しウィジェットのマージン、パディングそれぞれに50pxの数値を入力してみてください。
-
マージンを入れた場合： 赤い背景の「外側」にすき間が空き、赤い箱ごと押し出されて移動します。
-
パディングを入れた場合： 赤い背景の「内側」にすき間ができ、赤い箱自体が大きく膨らみます。
この違いを実際の画面で確認すると、余白の仕組みが腑に落ちやすいと思います。
実務での使い分けのコツ
実際のホームページ制作では、目的によってこの2つを明確に使い分けます。
例えば帯状の見出しの場合、
-
帯を太く大きく見せたい時： 文字と枠の間のすき間を広げるため、「パディング」を使います。
-
帯状の見出しと上にある画像とを離したい時： 要素同士の距離を取るため、「マージン」を使います。
なお、現在主流のコンテナを使っている場合、要素同士のすき間（マージン）は親コンテナのギャップ機能で一括管理するのが推奨されています。要素単体の内側のデザインを整える際に、しっかりとパディングを活用しましょう。
まとめ
-
マージンは枠の「外側」のすき間（他の要素との距離を取る）。
-
パディングは枠の「内側」のすき間（自分自身を膨らませる）。
-
迷ったらウィジェットに「背景色」をつけて動きを確認する。
余白のルールをマスターすれば、思い通りの美しいレイアウトが組めるようになります。ぜひ実際の編集画面で数値を動かして、違いを体感してみてください！
