インライン要素とpaddingの微妙な関係♡

その前に。なにはともあれ、marginとpaddingの違いについて

インライン要素とpaddingの微妙な関係に切り込む前に、marginとpaddingについて簡単に説明します。
※CSS3で新たに追加された、box-sizingを使用すると、解釈が異なってきます。ご注意ください。

上の図では、下記のようなHTMLとCSSをつけたときに、marginやpaddingがどこになるのかを示しています。

<div class="ex-1-wrapper">
<div>オッス!<br>コンテンツでっせ。</div>
</div>

.ex-1-wrapper {
	border:3px solid #397436;
	width:494px;
}
.ex-1-wrapper div {
	background-color:#e94e4c;
	margin:38px 28px;
	padding:100px 132px;
	width:151px;
	height:48px;
	border:11px solid #f5a917;
}

Paddingとは

border（赤色の枠線）の内側から実際のコンテンツまでの距離になります。上の画像で言うと、オレンジ色の矢印部分がpaddingになります。
※高さが指定されている場合は、高さの範囲内は、paddingには含まれません。

Marginとは

borderの外側の余白部分になります。上の画像で言うと、緑色の矢印部分です。

インライン要素とPaddingを使って実験

今回は、以下のことについて調べてみます。

1. spanタグに左右のpaddingを取ってみる
2. spanタグに上下のpaddingを取ってみる
3. aタグなどのクリックできる要素に上下のpaddingを取ってみる

1. spanタグに左右のpaddingを取ってみる

※分かりやすくするために、HTML上では、paddingのついたspanにさらにspanで別の色を重ねてます。オレンジ色部分がpaddingになります。

左右に、2em の padding を取っています。これは、普通にできます。

2. spanタグに上下のpaddingを取ってみる

ここでは、以下のような形になることを目指します。

※line-heightを 5.4em（上2em+下2em+もともとのline-height 1.4em）とっています。

上下に2emの paddingを取ってみました。padding部分の背景色を見ると、paddingが取られていることが確認できます。少し見やすくするために、背景色ではなく、borderにしてみます。

これを見ると、確かにpaddingはとっていますが、上下のコンテンツとの余白は、無視され、重なり合っていることがわかります。

インライン要素にpaddingの上下は取れましたが、要素の高さには影響しないため、コンテンツが重なってしまうことがわかりました。

3. aタグなどのクリックできる要素に上下のpaddingを取ってみる

paddingはとってくれるということは、クリック領域はどうなるの!? ということで、aタグに上下のpaddingを取ってみました。
※aタグでは、paddingもクリック領域になります。

paddingで確保した領域もクリックできることがわかりました！しかし、重なってしまっています。重なった部分の領域はどうなるんだろう…ということで、試してみました。

マウスを乗せようとしてみると、重なり合ってる部分は、あとから表示される下の行のpaddingが邪魔をしているので、クリックできなくなってしまいました。

※ たまに、「aタグ入れたのになぜかクリックできない…!」という事態になってしまう場合があります。このときは、他の見えない要素が上に重なってしまっている可能性があります。何か要らないものが重なっていないかを調べて、取り除くか、 z-index で重なり順を調整してみると上手くいくときがあります。

まとめ

• インライン要素の左右のmargin、paddingは、余白を取り、左右の要素の位置に影響する
• インライン要素の上下のmarginは、無視される
• インライン要素の上下のpaddingは、余白はとってくれるが、上下の要素の位置には影響しない
• インライン領域のクリックすることのできる領域は、paddingも考慮される（marginのように無視はされないので、上下でpaddingを取った部分もクリックできる）
• クリック領域の上にコンテンツが重なっていると、クリックできなくなる

以上、今回は、インライン要素とpaddingの関係について調査してみました！

今後とも、当ブログをよろしくお願いいたします。