.png)
Wixの「パディング」と「マージン」とは？余白の違いがわからない人向けに内側・外側の使い分けをやさしく解説
- 20 時間前
- 読了時間: 8分
Wix Studioでサイトを作っていると、「パディング」「マージン」という言葉が出てきて、どちらが何の余白なのか混乱してしまう。
そんな経験はありませんか？
見た目はきれいに整っていたのに、あとから文章を差し替えたら要素同士がくっついてしまった。
中央がなんとなくズレていて「Wixっぽい素人感」が抜けない。
こうした悩みの多くは、余白を手で揃えてしまっていることが原因です。
パディングとマージンは、名前が似ているうえに設定パネルの近い場所に並んでいるため、初心者がつまずきやすいポイントです。
ただ、違いさえ一度つかんでしまえば難しいものではありません。
この記事では、内側の余白と外側の余白という考え方で、両者の使い分けをやさしく解説します。
パディングとは？要素の「内側」の余白のこと
パディングは、要素の「内側」にできる余白のことです。
もう少しかみ砕くと、コンテナ（枠）と、その中に入っているコンテンツ（テキストや画像）との間にできる空間を指します。
イメージしやすいのは、額縁の中に写真を入れたときの、写真と額縁のフチの間のスペースです。
額縁いっぱいに写真を貼るとぎゅうぎゅうで窮屈ですが、少し余裕を持たせると見やすくなります。
この「中の余裕」がパディングです。
Wix Studioでは、次の手順で設定します。
パディングを付けたいコンテナをクリックして選択する
設定パネルの「余白」の項目を開く（これがパディングです）
上下・左右、または特定の方向だけに値を入力する（例：上下に20ピクセル）
必要に応じてコンテナの高さも縮めると、中身にぴったり合う
パディングを設定しておくと、コンテナの枠と中のテキストがくっつかず、ゆとりのある見た目になります。
とくに、あとから文章が長くなっても枠を突き抜けにくくなるため、更新前提のサイトでは欠かせない設定です。
マージンとは？要素の「外側」の余白のこと
マージンは、パディングとは逆に、要素の「外側」にできる余白のことです。
ある要素と、隣にある別の要素との間の距離を調整するのがマージンの役割です。
たとえば、見出しと本文が近すぎて読みづらいとき、見出しの下にマージンを入れると、ちょうどよい間隔が生まれます。
要素そのものの中身ではなく、要素と要素の「間」を空けたいときに使うのがマージンだと考えてください。
Wix Studioでは、次のように設定します。
対象の要素（見出しや本文テキストなど）を選択する
外側の余白（マージン）に値を入力し、要素間の間隔を調整する（例：見出しの下に41px、本文の下に57px）
「配置」の設定で上寄せなどに変えると、上マージンの効き方が変わる（例：上マージン28px→上寄せにすると0に）
ここで一点だけ注意があります。
マージンは、要素の「配置（ドッキング）」の状態によって効き方が変わることがあります。
たとえば上に28pxのマージンを入れていても、その要素を上寄せに配置すると、上の余白が0として扱われる場合があります。
思ったとおりに間隔が変わらないときは、配置の設定も合わせて確認してみてください。
パディングとマージンの違いを図でイメージする
言葉だけだと混同しやすいので、位置関係で整理してみましょう。
要素を一つの箱だと考えると、パディングは箱の「中」の余白、マージンは箱の「外」の余白です。
両者の違いは、大きく次の3点にまとめられます。
パディングは要素の内側（枠と中身の間）の余白で、マージンは要素の外側（要素同士の間）の余白
パディングは中身にゆとりを持たせるために使い、マージンは要素同士を離すために使う
パディングを付けると要素が内側に締まって見え、マージンを付けると要素の位置が外へ動いて見える
表にすると、次のように整理できます。
項目 | パディング | マージン |
どこの余白か | 要素の内側 | 要素の外側 |
何と何の間か | 枠と中身の間 | 要素と要素の間 |
主な目的 | 中身にゆとりを持たせる | 要素同士を離す |
よくある使い方 | ボタンやコンテナの内側の余白 | 見出しと本文の間隔 |
イメージ | 額縁の中の余裕 | 額縁と隣の額縁の距離 |
この「内側か、外側か」という一点さえ押さえておけば、設定パネルでどちらを触ればよいか迷わなくなります。
どっちを使う？内側を空けたいか・要素同士を離したいかで決める
結論：内側（中身と枠の間）を空けたいならパディング、外側（要素と要素の間）を空けたいならマージンを使います。
迷ったら「今、余白を入れたいのは箱の中か、箱と箱の間か」を自分に問いかけてみてください。
たとえば、ボタンの文字がフチにくっついていて窮屈なら、それはボタンの内側の話なのでパディングです。
逆に、見出しと本文がくっついていて読みづらいなら、それは2つの要素の間の話なのでマージンです。
なお、同じ種類の要素をたくさん縦に並べるとき（メニュー項目やカードなど）は、1個ずつマージンを設定するのは大変です。
そんなときはスタックの「アイテムの間隔（ギャップ）」という仕組みを使うと、要素間の間隔を一括で均等に揃えられます。
間隔を揃えたいスタックをクリックして選択する
レイアウト設定の「アイテムの間隔」を開く
値を入力する（例：100ピクセル）と、スタック内の全要素の間隔が一括で均等になる
たとえば10個の要素が並んでいても、この設定なら1回で均等に揃います。
1個ずつマージンを手入力していた作業が、一気に楽になります。
手で揃えると細かく見るとズレていることが多いのですが、数値で管理すればすべての要素がきれいに整います。
Wixエディタには無く、Wix Studioで初めて出てくる概念
じつは、パディングやマージンという考え方は、従来のWixエディタには存在しません。
これらはWix Studioで初めて登場する、コーディング的な余白の管理方法です。
Wixエディタに慣れている人は、要素の右下を掴んで、Shiftを押しながらドラッグしてサイズや位置を揃える操作に慣れているかもしれません。
ただ、この手動の揃え方は、細かく見ると微妙に均等になっていないことが多く、更新のたびに崩れやすいという弱点があります。
Wix Studioでパディング・マージン・ギャップを数値で設計しておく利点は、大きく次の2つです。
更新に強い：あとから文言が長くなっても、あらかじめ余白が確保されているので要素同士がくっついたり突き抜けたりしにくい
きれいに揃う：数値で管理するため、中央寄せや間隔のばらつきといった「素人感」が出にくく、デザインクオリティが安定する
Wix Studioでサイト制作を教えている國雲は、余白設計の優先度について「スタックの次に必須」と話しています。
マージンは基本中の基本、パディングも使いこなせるようになると、更新運用まで見据えたきれいなサイトが作れるようになります。
サイトは「ただ作って終わり」ではなく、公開後の更新・運用まで考えて余白を設計しておくことが大切です。
もし自社のWix Studioサイトで余白の崩れや素人っぽさにお悩みでしたら、ぜひ一度ご相談ください。
よくある質問（FAQ）
Q1. パディングとマージンの一番の違いは何ですか？
A. パディングは要素の「内側」（枠と中身の間）の余白、マージンは要素の「外側」（要素と要素の間）の余白です。
中身にゆとりを持たせたいならパディング、要素同士を離したいならマージン、と覚えておくと迷いません。
Q2. Wixエディタでもパディングやマージンは使えますか？
A. いいえ、従来のWixエディタにはパディング・マージンという概念はありません。
これらはWix Studioで初めて登場する、コーディング的な余白の管理方法です。
Wixエディタから移行した方が最初につまずきやすいポイントの一つです。
Q3. 余白の値はどの単位で入力すればよいですか？
A. 基本はピクセル（px）で問題ありません。
レスポンシブ対応をしっかり行いたい場合は、パーセント（%）やビューポートハイト（vh）などのビューポート系の単位を使い分けることもあります。
まずはpxで感覚をつかむのがおすすめです。
Q4. 更新するとレイアウトが崩れてしまいます。原因は何ですか？
A. パディングが設定されていないことが原因のケースが多いです。
見た目上は間隔が空いていても、実際にはパディングが無く、文言が長くなると要素同士がくっついたり突き抜けたりします。
あらかじめパディングを設定し、高さを調整しておくと防げます。
Q5. たくさん並んだ要素の間隔を一括で揃えたいのですが、どうすればいいですか？
A. スタックの「アイテムの間隔（ギャップ）」を使います。
スタックを選択してレイアウト設定の「アイテムの間隔」に値（例：100ピクセル）を入れると、中の全要素の間隔が一括で均等になります。
10個並んでいても1回で揃うので、1個ずつマージンを入れる手間が省けます。
Q6. マージンを入れたのに間隔が変わりません。なぜですか？
A. 要素の「配置（ドッキング）」の状態が影響している可能性があります。
たとえば上に28pxのマージンを入れていても、その要素を上寄せに配置すると上の余白が0として扱われることがあります。
マージンが効かないときは配置の設定も確認してみてください。
Q7. パディングとマージン、初心者はどちらを先に覚えるべきですか？
A. まずはマージンから覚えるのがおすすめです。
マージンは要素同士を離す基本中の基本の設定です。
慣れてきたらパディングも使いこなすと、更新に強くゆとりのあるレイアウトが作れるようになります。
制作でスタックを扱ううえでは、國雲いわく「スタックの次に必須」の知識です。
【この記事の監修者】
中田ディレクター（株式会社ラジャ｜SEO担当監修）
保有資格・実績：Wixレジェンドレベルパートナー／サイト制作400サイト以上／Wix Studio制作100サイト以上（日本トップクラス）／Wix Studio専門スクール「ノコド道場」運営
