Studioの余白が思い通りにならない？padding・margin・gapの使い分け

Studioでサイトを作っていると、「なんか余白が変」と感じたことはありませんか？

こうなる原因は、性質の違う複数の余白について知らないまま設定していることがほとんどです。

本記事では、Studioにおけるpadding・margin・gapの違いと、思い通りに余白を設定するための使い分けについて解説します。

余白には「内側」と「外側」の二種類がある

まず押さえておきたいのは、「余白」には箱の内側と外側の二種類の余白があるということ。

ここで言う「箱」とは、Studioで配置するパーツやグループのことだと思ってください。
テキストや画像を入れる器のような存在で、Webサイトはこの箱をいくつも組み合わせて作られています。

そして余白とは「中身と箱の縁の間」か「箱と箱の間隔」で、まったく意味が変わってきます。

たとえば、背景色をつけたボタンがあるとします。

ボタンの中の文字が縁ギリギリに詰まっていると窮屈に見えるので、文字と縁のあいだに余白を持たせたい時が「内側」の余白。

一方で、そのボタンと、その下にある別の要素とのあいだが近すぎるので離したいというのが「外側」の余白。

このように、自分は内側と外側のどちらを触りたいのかを意識できるようになるだけで、余白の設定は驚くほど扱いやすくなります。

そしてこの内側のもう一つの余白、「中身と中身の間隔」を加えた3種類に、Studioのpadding・margin・gapがそれぞれ対応しているという訳です。

内側はpadding、箱の間はmargin、子同士はgap

それでは実際のStudioの余白設定について解説していきます。

padding（パディング）

箱の縁と、その中に入っている中身（テキストや画像）とのあいだに空けるスペースを指します。

paddingを広げると、中身の周りに空間が生まれて、ゆったりとした印象になります。

ポイントは、paddingの範囲には背景色や背景画像が及ぶということ。

つまり、背景色をつけた箱でpaddingを広げると、その余白部分も背景色で塗られます。

margin（マージン）

箱そのものと、その外にある別の箱とのあいだに空けるスペースです。

paddingとは逆に、marginの範囲には背景色は及びません。

あくまで箱と箱を引き離すための、透明な余白だと考えてください。

「この要素だけ、もう少し下に離したい」といった個別の調整に向いています。

境界の内側がpadding、外側がmarginというのはCSSでも同じ考え方で、Studioに限らずWeb制作全般で通用します。

gap（ギャップ）

ひとつの箱の中に並んでいる「子要素同士の間隔」をまとめて設定する余白です。

重要なポイントとして、同じ要素同士に余白を設けたいときに、marginで一つずつ余白を足していく方法と、gapで親からまとめて管理する方法があります。

marginだと細かく設定できる代わりに数が増えるほど管理が難しくなり、gapなら全て同じ間隔になる代わりに一括で設定・変更することができます。

このように、Studioには内側のpadding、外側のmargin、要素同士のgapという三つの設定があり、正しく理解しておくことで余白の設定で迷わなくなります。

Studioでの余白設定の使い分け

3つの役割が分かったところで、実際にStudioでサイトを作る際の使い分けについて、僕なりのやり方も交えてお話しします。

僕はStudioで余白を設定するときは「基本的にはgap、細かい設定や大きなセクションにpaddingやmargin」というような形で使い分けています。

Webサイトはテキストや画像といった、たくさんのパーツから構成されていて、またパソコンやタブレット、スマートフォンなど、さまざまな画面幅で表示されます。

なので、一つ一つをmarginやpaddingで設定していると「スマホの時の余白がおかしい」「一箇所だけ余白を変更し忘れている」といった部分が出てきます。

一方で、gapで設定していれば、親からまとめて変更できて、要素を追加しても自動で余白が追加されますし、レスポンシブでも崩れにくくなります。

全体の統一感を、少ない労力で設定できるわけです。

そのうえで、この要素だけはもう少し離したいという例外が出てきたときに、はじめてmarginやpaddingで個別調整を加えます。

marginとpaddingの使い分けについては、どちらを使っても問題ない場合も多いのですが、僕は何かを離したいだけならmargin、中身にゆとりを持たせたいならpaddingを使用しています。

もっと簡単に言うと、背景色や枠線の内側にはpadding、外側やどちらでもいい場合にはmarginを使うといった感じです。

このように、どの設定を使うかという判断基準さえ持っておけば、余白で詰まったり困ったりすることはなくなると思います。

まとめ

Studioの余白がうまくいかないのは、センスの問題ではなく、余白の種類と役割を整理できていない場合がほとんどです。

padding・margin・gapの役割と使い分け方について理解しておけば、余白は狙い通りに設定できるようになります。

次にStudioでサイトを制作・編集するときは、自分は内側と外側のどちらを触りたいのかを意識しながら、3つの設定を使い分けて思い通りのレイアウトを作ってみてください。