意外と勘違いしてる!?CSSの「margin」「padding」の使い方と注意点

6e043743945ea66322dc963303b88e79_s

やぁ、結構人見知りのユトピ(@yutopi60pa)だよ。

セブンイレブンの黒糖マーガリンパン美味しいよね。100円なのに4つ入ってるとかコスパ良すぎ。2日はもつね。

というわけでどういうわけで、今回はCSSで余白を設定できるプロパティ「margin」「padding」について解説していくよ!
二つのプロパティはどちらも余白を設定できる効果があるけど、明確な違いがあるからしっかりと理解しておきましょう!

余白とは?

プロパティの説明に入る前にまず、「余白」とはなんでしょうか?
といっても難しく考えることはなく、余った部分のことですね。

余った部分だからと言ってあなどってはいけません!

余白にはサイトを見やすくしたり、文字を読みやすくしたり、はたまた余白に意味を持たせたりなど、デザイン上では非常に重要な要素の一つなんです。余白のあるなしや、広さが少し違うだけで伝わり方が全く違うことなんてよくあります。

ではHTMLにおいての余白についてみていきましょう!

yohaku_03

このような幅が150px、高さが100pxのボックスがあったとしましょう。
このうちwidthに当たる部分はご覧のとおりボックスの幅ですね。heightも同様にボックスの高さです。

borderはボックスの縁や枠線のことです。この枠線がmarginとpaddingを理解するうえで重要になっていきます。

yohaku2_03

このborderを境に内側の緑色の部分がpaddingで設定できる余白です。

yohaku04_03

そしてborderの外側、つまりボックスの外側にあるオレンジ色の部分がmarginで設定できる余白です。

このようにmarginとpaddingは同じ余白を指定できるのですが、ボックスに対して外側か内側かで大きく違います。
この点をしっかりと理解して次からの解説に進んでいきましょう!


marginとは?

さて、先ほどのところでmarginについて理解してもらったところで、ここでは一つ一つ見ていきましょう。

CSSプロパティの「margin(マージン)」とは、ボックスに対して外側の余白を設定できるプロパティです。
指定はpx(ピクセル)か%(パーセント)を使った数値で、上下左右の余白を指定していきます。

marginの使い方

次に使い方ですが、これはmarginは4つの指定方法があります。

数値を1つ指定

例:「margin: 10px;」 この場合は上下左右10px分の余白が空きます。

数値を2つ指定

例:「margin: 10px 20px;」 この場合は上下に10px、左右に20px分の余白が空きます。

数値を3つ指定

例:「margin: 10px 40px 70px;」 この場合は上に10px、左右に40px、下に70px分の余白が空きます。

数値を4つ指定

例:「margin: 10px 20px 30px 50px;」 この場合は上に10px、右に20px、下に30px、左に50px分の余白が空きます。

このような感じで指定することができます。
最後の4つ指定した場合は上→右→下→左と順番に指定されますが、これは時計回りでの順番なので、そのように覚えておけばすぐに理解しやすいと思います。

それでは実際にやってみましょう!

marginを使ってみよう!

marginに1つ数値を指定

余白無し

.kara
#ma0 上下左右に余白無し!
.kara

コード

結果

.kara
#ma1 上下左右に20px分の余白が空いてるよ!
.kara

marginに2つ数値を指定

コード

結果

.kara
#ma2 上下20px、左右に10px分の余白が空いてるよ!
.kara

marginに3つ数値を指定

コード

結果

.kara
#ma3 上に20px、左右に10px、下に40px分の余白が空いてるよ!
.kara

marginに4つ数値を指定

コード

結果

.kara
#ma4 上に20px、右に10px、下に40px、左に30px分の余白が空いてるよ!
.kara

どうです?
余白がわかりやすいように上下に中身の無い「.kara」というブロック要素を置きました。

この要素との間の余白や、左右の余白が空いているのわかりましたか?このようにしてmarginで余白を指定することができます。

またこれを応用すれば、余白を大きくとって好きなところに要素を配置させることもできます。

ネガティブマージンのやり方

marginには他にもネガティブマージンというものがあります。(マイナスマージンともいいます)

先ほどまではmarginに指定した数字は正の数でしたよね?ネガティブマージンの場合は負の数、つまりマイナスの数字を指定するやり方です。

yohaku05

マイナスの数値を指定するとどうなるかというと、例えば上に-10px分の余白を指定した場合、ボックスが10px上へ動きます。
同様に左に-20pxを指定すると、左へ20px動きます。

正の数ではその逆に動いていたのがデモでわかったと思います。ネガティブマージンは余白を空けず、間が詰まっていくのが特徴です。

それでは実際にやってみましょうか!

ネガティブマージンを指定!

margin: -20pxを指定

コード

結果

.kara
#ma5 上下左右に-20px分の動くよ!
.kara

margin: -20px -30px -10px -40pxを指定

コード

結果

.kara
#ma6 上に-20px、右に-30px、下に-10px、左に-40px分の余白が空いてるよ!
.kara

このようにネガティブマージンを指定すると余白は空かずに詰まっていきます。
なので上下のブロック要素と重なってしまっているわけですね。

これがネガティブマージンです。
ですが、あまり多用しすぎると管理が大変になることがあるので、どうしても使わなきゃいけないとき以外はあまり使わない方がいいですね。

そのほかのmarign関連プロパティ

marginには同じように余白を指定できるプロパティが4つあります。

margin-top

上のみ余白を指定できる。

margin-bottom

下のみ余白を指定できる。

magin-right

右のみ余白を指定できる。

margin-left

左のみ余白を指定できる。


これらのプロパティはmarginと同じようにpx(ピクセル)や%(パーセント)で指定できます。ただし数値は1つだけ。
基本的にmarginと機能は同じなので、どちらを使うかは1つの方向にだけ余白を指定したい場合など、状況次第で変えていきましょう。

marginの注意点

最後にmarginの注意点を紹介しましょう。

yohaku06

marginは別々の要素の上の余白と下余白がが重なり合った場合、加算せれずに相殺されます。

それでは実際にやってみましょう!

marginの相殺

上下の余白が重なると相殺されるよ!

コード

結果

#ma7 下に50pxの余白が空いてるよ!
#ma8 上に50pxの余白が空いてるよ!

これは二つの50pxのmarginがあるので、余白は100pxになるような気がしますが、これは相殺されて50pxとなるので、注意してください。
ちなみに同じ数字ではなく、異なる数字だった場合は大きい方のmarginが採用されます。

上下の余白がぶつかり合った場合は相殺しますが、左右の余白の場合はこのようなことは起きません。
ですので、上下の余白を指定するような場面ではこの注意点を意識しながらコーディングをしていきましょう!


paddingとは?

CSSプロパティ「padding(パディング)」とは最初の説明のとおり、ボックスの内側の余白を指定します。
指定はpx(ピクセル)と%(パーセント)を使った数値で、上下左右の余白を指定できます。

paddingの使い方

paddingはmarginと同じように4つの指定方法があります。
これはmarginとセットで覚えてしまいましょう。

数値を1つ指定

例:「padding: 10px;」 この場合は上下左右10px分の余白が空きます。

数値を2つ指定

例:「padding: 10px 20px;」 この場合は上下に10px、左右に20px分の余白が空きます。

数値を3つ指定

例:「padding: 10px 40px 70px;」 この場合は上に10px、左右に40px、下に70px分の余白が空きます。

数値を4つ指定

例:「padding: 10px 20px 30px 50px;」 この場合は上に10px、右に20px、下に30px、左に50px分の余白が空きます。


それではさっそく実際に使ってみましょう!

paddingを使ってみよう!

paddingに1つ数値を指定

余白無し

.kara
#pa0 上下左右に余白無し!
.kara

コード

結果

.kara
#pa1 上下左右に20px分の余白が空いてるよ!
.kara

paddingに2つ数値を指定

コード

結果

.kara
#pa2 上下20px、左右に10px分の余白が空いてるよ!
.kara

paddingに3つ数値を指定

コード

結果

.kara
#pa3 上に20px、左右に10px、下に40px分の余白が空いてるよ!
.kara

paddingに4つ数値を指定

コード

結果

.kara
#pa4 上に20px、右に10px、下に40px、左に30px分の余白が空いてるよ!
.kara

分かりやすいようにmarginの時とはボックスの高さを変えてあります。
このようにオレンジのボックスの内側に余白が入っているのがわかると思います。

このようにして文字や画像の位置を調整すれば、よりユーザーにとって見やすいデザインをすることができます!

そのほかのpadding関連プロパティ

paddingにはmarginと同じように関連した4つのプロパティがあります。

padding-top

上のみ内側の余白を指定できる。

padding-bottom

下のみ内側の余白を指定できる。

magin-right

右のみ内側の余白を指定できる。

padding-left

左のみ内側の余白を指定できる。

marginと同じですね。指定できる数値は1つだけ。
こちらもpaddingだけで事足りてしまいますが、1つの方向にだけ余白を指定したい場合など、状況に応じては使い分けていきましょうね。

paddingの注意点

paddingの注意点ですが、先ほどmarginのところで「ネガティブマージン」を紹介しました、paddingに関してはそのようなやり方はありません。
もしマイナスの数値を指定した場合、エラーになってなにも起きません。

たまに勘違いしている人がいるので、注意しておきましょう!

インライン要素での注意点

ここで説明することは以前書いて記事でも紹介していますので、詳しいことはそちらをご覧ください。

あなたは大丈夫?”ブロック要素”と”インライン要素”の違いを理解しよう。【お母さんにもできるHTML入門】

どういうことかといいますと、インライン要素(aタグやspanタグなど)に余白を指定した場合、くせのある動きをします。
具体的にはこんな感じ。

inline1

インライン要素のmarginの場合、上下は効かず、左右のみ余白を空けることができます。

inline2

インライン要素のpaddingは上下左右指定できますが、上下は見た目上は余白がとられません。上下に文章と重なってしまってますね。
要するに上下のpaddingは効かないと同じです。

このようにインライン要素にmarginやpaddingを使用する場合は独自のくせみたいなものがありますので、コーディングする際は気をつけながらやっていきましょうぜ!


まとめ

以上がmarginとpaddingの解説でした。
どちらも同じ余白に関するCSSプロパティでしたが、どちらも使いどころが微妙に異なってくるので、自分で実際に使ってみてその見極めをしていくことが大事ですね。

指定方法などすこしとっつきにくいところもあると思いますが、今回あげた注意点だけ気をつけていれば意外と簡単にできるのでぜひチャレンジしてみてくださいね!!

コメントを残す

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