CSSの余白調整はmarginとpaddingだけじゃない｜見やすいデザインを作る基本

CSSで余白を調整しようとすると、まず margin や padding を思い浮かべる方が多いと思います。
ただ、実際に作業していると、margin を変えても思ったように間隔が変わらないことがあります。

その原因は、余白が margin や padding ではなく、gap や line-height、要素の横幅などによって作られている場合があるからです。

この記事では、CSSの余白調整を margin と padding だけで考えず、見やすいデザインを作るために確認したいポイントを初心者向けに整理します。

余白はmarginとpaddingだけで決まるわけではない

CSSで余白を調整するとき、margin と padding はとても大切です。

しかし、画面上で見えている「間隔」や「ゆとり」は、この2つだけで決まっているわけではありません。

たとえば、FlexboxやGridで並べた要素同士の間隔には gap が使われていることがあります。また、文章の行間には line-height が関係します。

そのため、余白を整えるときは「どのプロパティで余白が作られているのか」を確認することが大切です。

余白が思ったように変わらないときは、margin や padding 以外のプロパティが関係していないか確認してみましょう。

marginとpaddingの役割を整理する

まずは、余白調整の基本になる margin と padding の役割を確認しておきます。

margin は、要素の外側に作る余白です。隣の要素との距離を空けたいときに使います。

padding は、要素の内側に作る余白です。背景色や枠線の内側で、文字や画像との間隔を空けたいときに使います。

margin は外側、padding は内側の余白です。まずは「どこの余白を変えたいのか」を見ると、使い分けしやすくなります。

gapは要素同士の間隔を作る余白

gap は、FlexboxやGridで並べた要素同士の間隔を作るプロパティです。

カードやリストを横並び・縦並びにしたとき、要素と要素の間に一定の余白を入れたい場合に使えます。

.card-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

この例では、.card-list の中にある要素同士の間に 20px の余白ができます。

DevToolsで確認すると、gap によって作られた余白が色付きで表示されることがあります。Chromeでは、FlexboxやGridの間隔が紫色のように見えることがあります。

DevToolsで親要素の .gap-demo を確認すると、カード同士の間にある余白が色付きで表示されています。この部分が gap によって作られている間隔です。

この場合、カード同士の間隔を変えたいときは、子要素の margin だけでなく、親要素に指定された gap も確認します。

DevToolsの色だけで判断せず、選択している要素やCSSの指定も一緒に確認しましょう。この例では、カード同士の間隔に gap が使われています。

line-heightは文章の読みやすさに関わる余白

line-height は、文章の行の高さを指定するプロパティです。

直接「余白」という名前ではありませんが、行と行の間にできるゆとりに関係するため、文章の読みやすさを整えるときに重要です。

.article-text {
  line-height: 1.8;
}

この例では、文章の行の高さを文字サイズの 1.8倍 にしています。行間にゆとりができるため、長めの文章でも読みやすくなります。

反対に、line-height が小さすぎると、文章が詰まって見えることがあります。本文や説明文では、少し余裕を持たせると読みやすくなります。

文章が窮屈に見えるときは、margin だけでなく line-height も確認してみましょう。

max-widthで読みやすい横幅と余白を作る

余白は、margin や padding を増やすだけで作るものではありません。

要素の横幅を広げすぎないようにするだけでも、左右に余白が生まれ、読みやすい見た目になります。

.content-box {
  max-width: 720px;
  margin: 0 auto;
}

max-width は、要素の最大幅を指定するプロパティです。この例では、.content-box の横幅が最大でも 720px までになるようにしています。

margin: 0 auto; は、左右の余白を自動で調整して中央寄せにする指定です。横幅を制限した要素を中央に配置したいときによく使います。

横幅いっぱいに広がって読みにくいときは、余白を足す前に max-width で幅を制限できないか確認してみましょう。

余白を整えるときの確認手順

余白が思ったように整わないときは、いきなり margin だけを増やすのではなく、どこで間隔が作られているのかを順番に確認すると分かりやすくなります。

まずは、次のような流れで確認してみましょう。

1. margin で外側の余白を調整しているか
2. padding で内側の余白を調整しているか
3. FlexboxやGridで gap が使われていないか
4. 文章が詰まって見える場合は line-height が小さすぎないか
5. 横幅が広すぎる場合は max-width で制限できないか

このように確認すると、「なぜ余白が変わらないのか」「どのプロパティを調整すればよいのか」を見つけやすくなります。

余白は、単に広げればよいものではありません。要素同士の距離、文章の読みやすさ、横幅のバランスを見ながら整えることが大切です。

まとめ

CSSの余白調整では、margin と padding が基本になります。

ただし、画面上で見えている余白や間隔は、この2つだけで作られているとは限りません。

• margin は、要素の外側の余白を調整する
• padding は、要素の内側の余白を調整する
• gap は、FlexboxやGridで並べた要素同士の間隔を作る
• line-height は、文章の行間や読みやすさに関係する
• max-width は、横幅を制限して左右の余白を作りやすくする

余白が思ったように変わらないときは、ひとつのプロパティだけを見続けるのではなく、どのCSSがその間隔を作っているのかを確認することが大切です。

まずは margin と padding を基本にしながら、必要に応じて gap、line-height、max-width も確認してみると、デザインを整えやすくなります。