HTML要素の余白はmarginで指定

HTMLのブロック要素、インラインブロック要素の余白はmarginで指定することができます。
本記事では、HTML要素の概念から、marginで余白を指定するところまで解説します。

marginとは

marginとは、cssプロパティの一種で、HTMLのブロック要素、インラインブロック要素に対して余白を指定することができます。

関連記事：cssセレクタ、プロパティについて詳しく解説

marginが使えるHTML要素とは

HTMLのタグの種類は大きく３つに分けられることは有名です。

• ブロック要素
• インライン要素
• インラインブロック要素

ブロック要素とは、「ブロック」なので、高さ、幅、位置などを指定することができます。
インライン要素は、「in line(行)」つまり、文字としての要素です。文字は通常ブロック要素の中に収められ、高さや幅は指定できません。
インラインブロック要素は、ブロック要素とインライン要素の特徴をあわせ持ちます。つまり、文字としての要素でありながら、高さや幅を指定できます。

このうち、marginを適応できるのはブロック要素とインラインブロック要素の二つだけです。

marginで余白を指定

それでは実際にHTMLのブロック要素に対してmarginの余白を適応させてみましょう。

See the Pen by M2RnRT (@m2rnrt) on CodePen.

marginを指定することで、ピンク色のブロック要素(divタグ)は、余白ができることによって移動するでしょう。とりあえず、上下左右全てに50pxの余白を与えてみます。

.margin {
  width: 100px;
  height: 100px;
  background-color: pink;
  margin: 50px; #上下左右全てに50pxの余白を指定
}

すると、余白ができたことによって、ブロック要素が移動したことがわかります。

See the Pen margin by M2RnRT (@m2rnrt) on CodePen.

もうちょっと詳しく説明します。marginは、要素の枠線（border）の外側の余白を指定します。つまり、ブロック要素やインラインブロック要素には、境界線が定義されています。その境界線の外に対する余白を作りたい時、marginを使うのですね。
ちなみに、枠線の内側の余白を指定するときはpaddingプロパティを使います。

marginの指定方法

marginの指定方法は４つあります。

• 上下左右まとめて指定
• 上下・左右を分けて指定
• 上・左右・下を分けて指定
• 上・下・左・右を分けて指定

上下左右の余白をまとめて指定

margin: 50px;

上下・左右の余白を分けて指定

margin: 50px 25px; //上下の余白が50px、左右の余白が25px

marginに指定する値は２つで、１つ目が上下の余白、２つ目が左右の余白を指定します。

上・左右・下の余白を分けて指定

margin: 50px 25px 10px; //上の余白が50px, 左右の余白が25px、下の余白が10px

marginに指定する値は３つです。１つ目が上、２つ目が左右、３つ目が下の余白を指定します。

上・下・左・右の余白を分けて指定

margin: 50px 40px 30px 20px; //上50px、左40px、下30px、右20px

marginに指定する値は４つです。時計回りに、上→左→下→右の値に対応しています。

また、それぞれ個別で指定する方法もあります。

margin-top: 50px; //上のmargin指定
margin-left: 40px; //左のmargin指定
margin-bottom: 30px; //下のmargin指定
margin-right: 20px; //右のmargin指定

Appendix

まとめです。

• HTML要素の余白を指定するとき、marginを使う
• marginで指定できるのは枠線（border）の外側
• ４つの指定方法がある

参考図書：1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

著者：Mana

価格：1243円(Kindle)