line-heightとmarginの違いを徹底解説：見た目を整えるCSSの基礎

---

はじめに

このテーマはウェブデザインの基礎としてとても大切です。
line-heightとmarginは名称が似ているものの、役割や影響する範囲が全く異なります。
初心者の方は混同しがちですが、正しく理解すればデザインの調整がぐっと楽になります。
本記事では中学生でも分かるように、具体的な例とともに丁寧に解説します。
さらに実務で使えるコツも紹介します。
途中で表を使って要点を整理しますので読みやすさにも配慮しています。

まず前提として、ウェブページは要素の積み重ねで成り立っています。
要素には自分自身の領域があり、その周りには外部の空白が必要です。
line-heightはテキストの「行間」
marginは要素間の「外部の空白」です。
この違いを理解するだけで、段落の読みやすさとページ全体の調和がぐんと良くなります。
この記事を読み終えるころには、line-heightとmarginを適切に使い分けられるようになるでしょう。

line-heightとは何か

line-heightは行の高さを決める属性です。
テキストの各行のベースラインと次のベースラインの間隔を作り出します。
たとえばfont-sizeが16pxの場合、line-heightを1.5と設定すると24px程度の高さになります。
この「行の高さ」は文字の大きさだけでなく、フォントの形状や文字間、そして行内の要素の配置にも影響します。
単位を指定する方法にはpxやemなどがありますが、最も使われるのはunitlessな比率です。
unitlessの場合、親要素のfont-sizeに対して相対的に決まるため、レスポンシブデザインに強くなります。
line-heightを適切に設定すると、長文でも目が疲れにくく、読み進めやすい文体になります。
とはいえ過度に広い行間は、情報の密度を落としデザインの緊張感を失う原因にもなるため、コンテンツの性質に合わせて調整することが大切です。

また、line-heightは画像やインライン要素にも影響します。
画像をテキストと並べて配置したとき、line-heightが低いと上下の余白が不揃いになることがあります。
逆にline-heightを高く設定すると、ベースラインが揃いにくくなる場合もあるため、実際に表示を見ながら最適値を見つけることが重要です。
読みやすさの基本として、段落間の視覚的リズムを作るための「適切な行間」を見つけましょう。

marginとは何か

marginは要素の外側の余白を作る属性です。
上下左右に空白を設けることができ、隣接する要素との距離感を調整します。
例えば見出しと本文の間、セクション間の余白を調整する際にmarginを使います。
marginにはmargin-top, margin-bottom, margin-left, margin-rightがあり、各方向に個別設定も可能です。
またmarginは二つのブロック要素が縦方向に並ぶとき、時に「マージンの崖落ち」と呼ばれる現象を起こします。
これは上下のマージンが互いにくっついて一つの空白として見えてしまう現象で、ウェブレイアウトの安定性に影響します。
この挙動を避けるには親要素のpaddingを使う、あるいはマージンの連結を意識して設計するなどの対処法があります。

marginは水平居住のセンタリングにも活躍します。
例えば幅が決まっている要素を中央に置くにはmargin-leftとmargin-rightをautoに設定します。
このとき要素は左右の余白を等しく取り、画面サイズが変わっても中央に表示されます。
ただし、marginは外部の空白なので、背景色やボーダーの外側にも影響を及ぼす点に注意が必要です。

line-heightとmarginの違い

ここがこのテーマの要点です。
line-heightはテキストの行間を決める内部の間隔、marginは要素同士の外部の間隔です。
つまりline-heightは「文字がどのくらい行間をとるか」を決め、marginは「要素どうしの距離感をどうとるか」を決めます。
両者は役割が異なるため、混同するとデザインの意図が伝わりにくくなります。
実際の運用では、paragraphのline-heightを適切に設定し、セクション間や見出しとの間隔をmarginで調整するのが基本です。
デザインの一貫性を保つためには、全体のリズムを崩さないよう、上下のmarginを統一することが有効です。

属性	何をするか	注意点
line-height	行の高さを決める	unitlessの場合はフォントサイズに対する倍率、pxなど長さを使うと固定の高さになる。過度な値は読みやすさを損なうことがある。
margin	要素の外側の余白を決める	上下のマージンは崖落ちすることがある。中央配置にはmargin: autoが便利。

実務での使い方とコツ

実務では目的に応じてline-heightとmarginを組み合わせます。
長文の段落にはline-heightを1.4〜1.8程度に設定すると読みやすくなります。
見出しと本文の間には適切なmarginを設定して視覚的な区切りを作りましょう。
また全体のリセットが効いていない場合はbodyのデフォルト値を見直すことが鉄則です。
レスポンシブデザインでは画面サイズに応じてline-heightとmarginを相対値に切り替えると、スマホでも読みやすいレイアウトになります。
デザインの一貫性を保つには、デザインシステムを作って基本的なline-heightとmarginの組み合わせを決めておくと良いでしょう。

まとめ

line-heightとmarginはどちらも「間合い」を作りますが、役割は異なります。
line-heightはテキスト内部の読みやすさを決める行間、marginは外部の要素間の距離感を決める空白です。
この違いを理解して使い分ければ、デザインの見た目と読みやすさが大きく向上します。
まずは身近な例から試してみましょう。例えば段落のline-heightを1.6程度に、見出しと本文の間に20px程度のmarginを設定してみると、ページ全体のリズムが整います。
少しずつ微調整を重ねて、自分のデザインの基準を作ると良いでしょう。

ピックアップ解説

A: ねえline-heightってさ、ただの「行間」ってだけじゃないんだよね。B: うん、それだけじゃなくて文字の見た目の高さの感覚を決めるっていうか、読みやすさの土台を作る感じ。C: そう。ラインが広がりすぎると文章同士がくっついて読みにくくなるし、狭すぎると窮屈に見える。D: marginはどうかというと、これは要素と要素の距離感を動かす外側の余白。A: 例えば見出しの下に空白を置くと、段落との区切りが明確になる。E: それとマージンは崖落ちって現象を起こすことがあるから、連続する要素をどう配置するかも計画が必要。F: 要はline-heightで読みやすさの密度を、marginで全体のリズムを決める、それぞれの役割を分けて使えばデザインが一気に整うんだ。

---