Elementorでデザインをしていると、誰もが一度はこんな余白の罠にハマります。
「画像を2つくっつけたいのに、マージンを0にしても謎のすき間が消えない…」 「横並びのカードのすき間をマージンで空けたら、スマホ表示でレイアウトが崩れた…」
Elementorには、要素同士の間隔を決める設定がいくつか存在します。これを理解せずにとりあえずマージンで調整！としてしまうと、修正地獄に陥ってしまいます。
今回は、Elementorの余白管理の要となる【ウィジェットスペース】と【カラムギャップ】の正しい使い方を解説します。これを読めば、もう謎のすき間に悩まされることはありません。
マージンを0にしても消えない謎のすき間の正体
ウィジェットを縦に並べた時、設定を何もいじっていないのに、要素と要素の間に少しだけすき間が空いていることに気づきませんか？
実はこれ、Elementorが初期設定で自動的に入れているウィジェット間のスペースが原因です。 マージンを0にしてもこの20pxは残るため、どうしてもピッタリくっつかない！という現象が起きます。
⚫︎ 解決策 サイト全体でこのすき間を調整する
この初期値の20pxは、サイト全体の設定で変更できます。
-
編集画面左上のハンバーガーメニュー（三本線）をクリック。
-
サイト設定 ＞ レイアウト を開く。
-
ウィジェット間のスペース (Space Between Widgets) の数値を変更します（0にすれば、サイト全体の基本のすき間がなくなります）。
ここを調整すると、サイト全体の設定なので、気になっていた箇所以外も変更になります。ページ制作を始める前にあらかじめ決めておくのがおすすめです。
特定の場所だけ調整したい時は
「基本は20pxでいいけど、このコンテナの中にある画像2枚だけはピッタリくっつけたい！」 「ここの横並びのカードのすき間は40pxにしたい！」
そんな時に活躍するのが、Elementorのギャップ（Gaps）やカラムのすき間といったレイアウト設定です。
一昔前は、各ウィジェットのマージンを使ってすき間を無理やり押し広げていましたが、これだと一番右端の要素だけマージンを消すといった面倒なパズルが発生し、スマホ表示で崩れる原因になっていました。 現在は、親となる箱（コンテナやセクション）側の設定で、中のすき間を一括コントロールするのが正解です。
余白調整の正解はこれ！構造別余白コントロール
Elementorの構造として、最新のコンテナ（Flexbox）を使っているか、従来のセクション・カラムを使っているかで設定項目が少し異なります。ご自身の環境に合わせて確認してください。
⚫︎ パターンA：コンテナを使っている場合
コンテナのギャップ機能は、箱（コンテナ）の中に入っている要素の「間」にだけ、指定したすき間を自動で作ってくれるという賢い機能です。
【基本の設定手順】
-
中にウィジェットが入っている親コンテナを選択します。
-
左パネルのレイアウトタブを開きます。
-
ギャップ (Gaps)の欄を見つけます。
ここに数値を入力することで、基本のウィジェット間のスペース（20px）を上書きし、そのコンテナ内だけの独自のすき間を設定できます。
-
ピッタリくっつけたい場合 ギャップの入力欄に、半角数字で 「0」 と入力してください。
※空欄（デフォルト）で20pxが適用されてしまうので、明示的に「0」と打ち込むのがポイント -
縦と横ですき間を変えたい場合 鎖のアイコンを外せば、縦横別々に設定できます。
-
列（Column）のギャップ： 横方向のすき間。横並びのカードの距離などに。
-
行（Row）のギャップ： 縦方向のすき間。スマホ表示で縦並びに切り替わった際の距離などに。
-
⚫︎ パターンB：従来のセクション・カラムを使っている場合
セクション構造の場合、横のすき間と縦のすき間で設定する場所が分かれています。
【横のすき間】カラム同士の間隔を調整・ゼロにしたい時
-
親となるセクションを選択します。
-
レイアウトタブのカラムギャップのプルダウンを開きます。
-
ピッタリくっつけたい場合は [ すき間なし ] を選択します。広げたい場合は [ 広い ] などを選びます。
【縦のすき間】カラム内のウィジェットの間隔を調整・ゼロにしたい時
-
調整したいカラムを選択します。
-
レイアウトタブのウィジェットスペースの欄を見つけます。
-
画像などを縦にピッタリくっつけたい場合は、ここに半角数字で「 0 」と入力します。
まとめ
Elementorで要素と要素の間の「すき間」をコントロールする時の鉄則は以下の通りです。
-
基本のすき間はウィジェットスペースに任せる。
-
要素間のすき間を個別に変えたい・無くしたい時は、マージンではなくコンテナのギャップで上書き（0などを入力）する。
-
マージンはコンテナ自体の外側に余白を作りたい時だけ使う。
このルールを守るだけで、スマホ表示にも強い、崩れない美しいレイアウトが作れるようになります。ぜひ試してみてください！
