CSSの余白調整、余白指定法｜margin、padding

CSSの勉強をスタートすると序盤に登場するのがmarginやpaddingといった余白の指定方法です。CSSの中では初歩的な部分とはいえ、勉強をはじめてまもない頃では混乱しやすい部分の一つとも言えるのではないでしょうか。しかし、余白を自由にコントロールできることで得られるメリットはとても大きいので、苦手を乗り越え、ぜひマスターしておきたいところです。そこで、今回はCSSの余白調整にスポットをあててご説明します。

余白を制するとデザインのクオリティが一段上がる

デザインにおいて大切な要素の一つが余白です。余白は美しさを演出するだけではなく、ユーザーの見やすさや使いやすさにおいても大きな効果を発揮します。CSSを使うとソースコードを無駄に膨らますことなく、簡潔な記述で余白をコントロールできます。余白の調整をマスターして、成果を得られるホームページ制作を実現しましょう。

marginとpaddingを理解してデザインの自由度を上げる

marginとpaddingは両方とも余白を指定するプロパティです。ただし、この2つの指定する余白は位置が異なります。marginは要素の外側、paddingは要素の内側の余白を指定します。わかりやすくイメージするに、要素で線で囲んでいると考えてみましょう。要素から枠線までの余白は内側に該当しますのでpaddingです。枠線から外はmarginが制する余白です。

さて、長さを表すプロパティが2つ出てきて、widthとheightとの関係が気になった人もいることでしょう。widthとheightは要素の縦横のサイズです。画像の場合は、その縦横サイズのことを指します。

つまり、外側から「margin」→「padding」→「widthとheight」という構成になります。

marginとpaddingの記述方法

基本的にmarginとpaddingの記述方法は同じです。書き方のパターンをご紹介します。余白はピクセル（px）でもパーセント（％）でも指定可能です。

1）一行でスッキリ記述する

上下左右を一行ずつ記述する方法もありますが、ソースコードが短くて見やすい4方向を一行で記述する方法を先にご説明します。以下のパターンをご覧ください。

・上下左右に20pxの余白を指定します。値を1つだけ指定すると全方向に余白サイズが適用になります。

margin: 20px;
padding: 20px;

・上下左右すべてに任意の値を指定したいときは、上右下左という時計回りの順序で記述します。たとえば、上50px、右40px、下30px、左20pxとする場合は以下になります。

margin: 50px 40px 30px 20px;
padding: 50px 40px 30px 20px;

・上下を共通、左右を共通の値とする場合は、2種のみの記述となり順番は、「上下」「左右」です。たとえば、上下20px、左右30pxなら、以下のように書きます。

margin: 20px 30px;
padding: 20px 30px;

・上と下をそれぞれ指定し、左右のみを共通にする場合は、「上」「左右」「下」の順で記述します。上10px、下30px、左右50pxなら以下になります。

margin: 10px 50px 30px;
padding: 10px 50px 30px;

2）必要な部分の余白のみを指定する方法

今度は部分の余白だけを指定します。top（上）、right（右）、bottom（下）、left（左）に10%を指定した例が以下です。

margin-top: 10%;
padding-top: 10%;

margin-right: 10%;
padding-right: 10%;

margin-bottom: 10%;
padding-bottom: 10%;

margin-left: 10%;
padding-left: 10%;

※ピクセルではなくパーセントを使うと便利な場合

さて、ここでは例として％（パーセント）を使ってみました。余白を指定する際、pxを指定するよりも%の方が便利な場合があるのです。たとえば、ホームページの幅が1000pxと仮定してみます。真ん中に600pxの幅（width）の画像を配置し、左右のpaddingが100pxずつ、同じくmarginが100pxずつといった指定をする場合、細かく幅の計算をして配置しなければいけません。仮にページ幅を変更しようと思った際には、再計算が必要となり手間がかかります。こういった場合、%で設定しておくと細かな計算をし直す必要がなく、レイアウトが楽になります。
パーセントで記述すると、画像のwidthが60%、左右のpaddingが10%ずつ、marginも10%ずつとなります。当然、それぞれのパーセントの合計は100%にならなければいけませんので注意が必要です。つまり、幅をパーセントで指定する場合は、幅に関わるすべての数値指定（width、padding、margin）はパーセントに統一することを忘れないようにしましょう。

▼画像加工で困ったら？手軽なツールを紹介

みんなが使えて導入しやすい！デザイン・動画・サイト制作の【簡単ツール特集】

専門職でなくても使いこなせるデザイン制作関連のツールを特集。弊社のマーケター・営業メンバーや総務・人事担当も実際に使えているツールを、1カテゴリにつき1つピックアップしてご紹介します。