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

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

余白のイメージ図

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

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

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

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

主な値

指定方法説明
数値数値に「em」、[rem」、「%」、「px」などの単位を付ける
auto関連するプロパティの値によって自動設定

例:上に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;
タイトルとURLをコピーしました