要素に余白を作るCSS、paddingとmarginの違いと使い方を徹底解説


ハム氏
なっちゃそ〜。要素に余白をつけたいときにmatginとpaddingどっちを使ったらいいか分かんないよ〜。
なっちゃそ
marginとpaddingの違いはCSSの中でも特に混乱するプロパティだからね。今回は2つの違いと書き方について解説していくよ。

 

paddingとmarginの基礎知識を知ろう

paddingとmarginはどちらもWeb上の要素に余白を作りたいときに指定するCSSプロパティですがその特徴にはいくつが違いがあります。それぞれ適切な用途で使用しないと思い通り表現が出来ないので、ここで2つの違いをしっかりと押さえておきましょう。

paddingとは

「paddingは要素の内側の余白のことである」という説明を多く見かけますがそれだとなんのことやらよくわからないですよね。

paddingは要素と要素の間に存在している詰め物です。paddingが詰まっている部分が余白となって表現されています。

 

デフォルトの状態は0なので、「ここは余白なんていらないよー」というときには特に指定する必要はありません。

では実際の作業でpaddingを指定したくなるのはどんなときかというと

要素に背景色をつけたいとき要素をボックスで囲んでボタンにしたいときです。

(もちろん他にも色々ありますが今回はpaddingの特徴を捉えやすいこの2つで説明したいきます。)

要素に背景色をつける

例えば、下の図のように見出しに背景色を設けたいとき、そのまま背景色の指定だけをしてしまうと点線の範囲しか色がつきません。そうではなく「少し広い範囲で色をつけたいんだ!」って時はpaddingをつけるとpaddingの指定範囲に背景色をつけることができます。

HTML/CSSの指定はそれぞれこんな感じ

 

ボタンを作る

ボタンはテキストの外側にborder(ライン)を引くことで作成することが多いですが、borderも何も指定しないで作成すると下の図の点線部分にひかれてしまいます。ボタンにはデザイン性を持たせたいのでpaddingをつけてテキストとborderの間をあけるようにします。

HTML/CSSの指定はそれぞれこんな感じ

いかがでしょう。少しはpaddingへの理解が深まったでしょうか?

ちなみに、この後紹介するmarginは要素の外側に余白を作るためのCSSプロパティなのでここで紹介した「背景色を作る」「ボタンを作る」といった用途の時には使うことができません。

paddingはwidth/heightに含まれない

ここで1つ注意して欲しいのが要素にwidthとheightを指定した場合、paddingはその中に含まれないということです。

もし要素のwidth/heightを指定した上でpaddingを設けるとその要素の縦幅・横幅は

width+padding /height+padding
 

となるのでこれを忘れてpaddingを設定してしますと意図しない結果になることがあります。

 

marginとは

marginは要素の外側に設けられる余白を指定するためのCSSプロパティです。これは普段目にする余白の概念に近いので理解しやすいかもしれませんね。

marginが使用されるのはそのままですが、要素と要素の間に余白を作りたい時です。

1つ例をあげてみましょう。

下の図のようにボタンが3つ並んでいるとしたら、ボタンに指定されているborderよりも外側に設けられる余白がmarginになります。

paddingの例で紹介した背景色をつける場合もmarginは背景色の外側につく余白になります。

 

marginの設定で要素をセンター配置にできる

ボタンやテキストなど、あらゆる場面で要素をセンターに持ってきたいといった事態が起こります。

そんな時はセンター配置にしたい要素に

margin : 0 auto;

と設定すると要素がエリアのセンターにきてくれます。 

 

paddingとmarginの書き方を知ろう

なっちゃそ
paddingとmarginの違いについては理解できましたか?ここからは実際にmarginプロパティ、paddingプロパティを指定するときの書き方について解説していきます。

paddingプロパティの書き方

CSSでpaddingプロパティを使用する場合はこんな感じに記述します

 

上記の指定方法だと上下左右全てに100pxのpaddingがつきますが、paddingは上だけに余白をつける、下だけに余白をつけるといった個別での指定も可能です。

その場合の書き方はこんな感じ

さらに「余白は全体に欲しいけど、全部違う値がいいんだよな〜」というにはこんな感じで指定すれば一回でバラバラの値を指定することができます。

4つの値はそれぞれ

padding{

上の余白 右の余白 下の余白 左の余白;

}

となっていて値の間は半角スペースで区切っています。

さらにさらに、「上と下が同じ値&左右が同じ値で指定したい」もしくは「上と下は違う値だけど左右は同じ値で指定したい」といった時はこんな感じになります。

paddingで指定できる単位

paddingプロパティでは

px em % を指定することができます。

マイナスの値やautoは指定することができないので少しだけ注意が必要です。

 

marginプロパティの書き方

CSSでmarginプロパティを使用する場合はこんな感じに記述します

この指定方法だとpadding同様、要素の周り全体に余白ができます。

上下左右どれかにだけmarginを指定したい場合はpaddingと同じ形式で指定することができます。

また全体にバラバラの値を指定したい場合と上下&左右を同じ値にしたい場合、上下がバラバラで左右は同じ値を指定したい場合もpaddingと同じ形式で指定することができます。

marginで指定できる単位

marginプロパティでは

px em % を指定することができます。

また、paddingとは違ってマイナスの値、autoを指定することができます。

特にマイナスの値はネガティブマージンといい、指定した箇所の余白を狭めることができます。

 

marginの相殺って何?

marginには、2つの要素それぞれにmarginが指定されていてそれらが隣り合っていた場合、2つの要素のmarginの値は片方が無効になり大きいの値が適用されるという特徴があります。これをmarginの相殺と言います。

これはmargin同士でのみ起こる現象で、padding同士やmarginとpaddingでは総裁は起こりません。

marginの相殺を考慮しないと意図したようなデザインにならないことがあるので覚えておくようにしましょう。

 

まとめ

いかがでしたか?

paddingとmarginの使い方はCSSを勉強する中で引っかかりやすい分野かと思いますが、実際にオブジェクトを作りながら余白を設けて見ると内側の余白と外側の余白の概念を理解できるかと思います。

非常によく使うプロパティなのでぜひ早めにマスターして余白を使いこなしてくださいね。

 

ではでは。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です