CSS｜余白を調整する「marginプロパティ」と「paddingプロパティ」

余白には画面を見やすくし、文章を読みやすくする大事なデザイン要素です。余白を調整するには、要素から外側に余白を加える「margin（マージン）プロパティ」と、要素の内側に余白を加える「padding（パディング）プロパティ」を使います。

このイメージ図で、青色のボックスに「余白の調整」と書かれた部分がコンテンツで、「padding」（余白）を含めたものが要素になります。また、要素から外側の余白が「margin」で、その境界線が「border（ボーダー）」といいます。

コンテンツの大きさに、内側の余白「padding」を加えた横幅を「width（ウィドゥス）」、高さを「heguht（ハイト）」と呼びます。

CSS｜幅を変える「widthプロパティ」高さを変える「heightプロパティ」

Webサイトのレイアウトに欠かせないコンテンツ領域のサイズ。「widthプロパティ」幅を指定し、「heightプロパティ」は高さを指定します。相対単位と絶対単位主。

fudousin.com

2022.01.28

要素の外側に余白を加える「marginプロパティ」

「marginプロパティ」で要素から外側の余白を指定するには、四辺の何れかを「margin-top（上）」、「margin-bottom（下）」、「margin-left（左）」、「margin-right（右）」で指定する方法と、marginプロパティだけで指定する方法があります。

主な値

例：上に30pxの余白と左に100pxの余白を設ける

＜ブラウザ表示＞

＜HTML＞

<div>
    <h1>吾輩は猫である。名前はまだ無い。</h1>
    <h2>どこで生れたか頓（とん）と見當がつかぬ。</h2>
    <p>
       何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
       吾輩はこゝで始めて人間といふものを見た。
       然（しか）もあとで聞くとそれは書生といふ人間中で一番獰悪（だうあく）な種族であつたさうだ。
       此書生といふのは時々我々を捕（つかま）へて煮て食ふといふ話である。
       然し其當時は何といふ考（かんがへ）もなかつたから別段恐しいとも思はなかつた。
    </p>
</div>

＜CSS>

div {
    background-color: pink;
    width: 600px;
    height: 300px;
    margin-top: 30px;
    margin-left: 100px;
}

四辺の何れかを指定する方法

【要素の上に余白を指定】

margin-top: 10px;

【要素の下に余白を指定】

margin-bottom: 10px;

【要素の左側に余白を指定】

margin-left: 10px;

【要素の右側に余白を指定】

margin-right: 10px;

marginプロパティだけで指定する方法

marginプロパティだけで指定する方法は、値を半角スペースで区切って上下と左右を指定したり、一括指定することも出来ます。

【四辺すべてに余白を指定】

値が1つの場合は、四辺すべてに同じ余白を作る事が出来ます。

margin: 10px;

【上下と左右に余白を指定】

値が2つの場合は、最初の数値が上下の余白になり、後の数値が左右の余白になります。

margin: 10px 20px;

【上と左右と下に余白を指定】

値が3つの場合は、最初の数値が上の余白、2番目の数値が左右の余白、最後の数値が下の余白になります。

margin: 10px 20px 30px;

【上下左右に個別の余白を指定】

数値が4つの場合は、先頭から上・右・下・左（時計回り）の順で余白を指定できます。

margin: 10px 20ox 30ox 40ox;

要素の内側に余白を加える「paddingプロパティ」

「paddingプロパティ」で要素の内側に余白を指定するには、四辺の何れかを「padding-top（上）」、「padding-bottom（下）」、「padding-left（左）」、「padding-right（右）」で指定する方法と、paddingプロパティだけで指定する方法があります。

これらの指定方法は、「marginプロパティ」と同じで、「主な値」も同じです。

例：要素の内側に30pxの余白を設ける

＜ブラウザ表示＞

＜CSS＞

div {
    background-color: pink;
    width: 600px;
    height: auto
    padding: 30px;
}

要素の内側に余白が出来たことで、随分と読みやすくなりました。文章の場合、読みやすい余白は文字サイズの1～2倍程度が目安です。文字サイズが 16px の場合、20px 程度の余白があれば読みやすくなります。

margin と padding は<h1>タグなどの見出しにもよく使われ、大見出しと小見出しなどを区別したりも出来ます。

例：「h1」と「h2」の余白による区別

＜ブラウザ表示＞

＜CSS＞

h1 {
    background-color: aqua;
    padding: 30px;
}
h2 {
    background-color : aqua;
    padding: 10px;