【CSS 1-2】余白を整える｜margin・paddingで“窮屈じゃない見た目”を作る（初心者向け）

CSSを書き始めると、次に気になりやすいのが余白です。

文字は変わったけど、まだ読みにくい。
見出しと本文が近すぎる。
箱の中が詰まって見える。

こういう時に使うのが、**margin** と **padding** です。

結論から言うと、今日はこの2つの違いが分かれば十分です。

• margin と padding の違いが分かる
• 見出しや段落の間に余白をつけられる
• 箱の中を窮屈じゃなくできる
• “読みやすさは余白でも変わる”感覚を持てる

前回の style.css に、下のコードを追加してください。
今回は、body / h1 / p に余白を足します。

body {
    background-color: #f7f7f7;
    margin: 0;
    padding: 24px;
}

h1 {
    color: #2563eb;
    font-size: 32px;
    margin-bottom: 16px;
}

p {
    color: #333333;
    font-size: 16px;
    margin-bottom: 12px;
}

toshi

数字は今は深く気にしなくて大丈夫です。
まずは“前より読みやすいか”だけ見ればOKです。

たとえば、見出しと本文の間を少し離したいなら margin。
ページの端と本文が近すぎるなら padding。

最初は「外か、中か」だけ分かれば十分です。

たとえば、本文を1つの箱っぽく見せるときは、こんなCSSが使えます。

main {
    background-color: #ffffff;
    padding: 24px;
}

この padding は、白い箱の“内側”に余白を作っています。
文字が箱の端にぴったり付かないので、少し読みやすくなります。

見出しと段落の間を離すなら、こんな書き方です。

h2 {
    margin-top: 24px;
    margin-bottom: 12px;
}

これは、h2 の上と下に余白を作っています。
見出しのまとまりが少し見やすくなります。

今までの内容に、余白だけ少し整えた例です。
style.css を丸ごと置き換えるなら、下の形でもOKです。

body {
    background-color: #f7f7f7;
    margin: 0;
    padding: 24px;
    color: #333333;
}

main {
    background-color: #ffffff;
    padding: 24px;
}

h1 {
    color: #2563eb;
    font-size: 32px;
    margin-bottom: 16px;
}

h2 {
    color: #111827;
    font-size: 24px;
    margin-top: 24px;
    margin-bottom: 12px;
}

p {
    font-size: 16px;
    margin-bottom: 12px;
}

• body の padding を 24px → 32px にしてみる
• h1 の margin-bottom を 16px → 24px にしてみる
• p の margin-bottom を 12px → 16px にしてみる
• main の padding を 24px → 20px にして違いを見てみる

toshi

余白は、
数字を少し変えて見比べると感覚がつかみやすいです。

• margin は外側の余白
• padding は内側の余白
• 余白をつけるだけでも読みやすさは変わる
• 最初は数字を少し変えて、違いを見るだけで十分

次は「ボックスモデルの入口」です。
border や width も使いながら、“箱として見る感覚”を少しずつ整理していきます。