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

CSSで余白を調整するとき、まず margin や padding を確認することが多いです。

ただ、画面上で見えている余白は、margin と padding だけで作られているとは限りません。要素同士の間隔、文章の行間、横幅の取り方なども、見た目の余白に関係します。

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

余白を作るCSSは他にもある

余白を直すときは、まず「どこにできている余白なのか」を見る必要があります。要素の外側なのか、内側なのか、要素同士の間隔なのか、文章の行間なのかで、確認するCSSの指定は変わります。

margin と padding は余白調整の基本ですが、そこだけを見続けると原因を見落とすことがあります。たとえば、FlexboxやGridの並びでは gap、文章の行間では line-height、横幅の調整では max-width が関係することがあります。

余白が思ったように変わらないときは、「どのCSSがその間隔を作っているのか」を確認しましょう。

marginとpaddingの役割を整理する

他のCSSを見る前に、まずは余白調整の基本になる 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 も見ると、デザインを整えやすくなります。

あわせて、リスト内の表示順や一部の見た目を変えたい場合は、CSSでリストの日付とタイトル順を変える方法｜orderとnth-childの実例も参考になります。