spanタグ、aタグなどのインライン要素にmarginやpaddingの上下の高さの指定が効かない!原因と対処法。

spanにpaddingが効かない_005

当サイトの行間の調整時、pタグを使うと都合が悪かったのでspanタグにmargin-bottom;を使ったところ効かなかったので備忘録です。

同様にリンクに使うaタグにもmargin-bottom、topが効きませんでした。
marginだけではなく、padding-top、bottomも効きません。

全部効かないわけではなく、左右は効いている様子...
少し詰まりましたが簡単に解決できました。

インライン要素の上下を指定するにはdisplay:inline-blockを使います。

spanやaタグにmarginが効かない

sytle内にmarginを指定したところ上下のみ効きませんでした。
spanにmarginが効かない_001分かりやすいようにtop、bottom、left、rightの4つをそれぞれ記述してみました。
spanにmarginが効かない_002ブラウザの開発者ツールで確認してみると、margin-topとmargin-bottomが効いていないようです。
aタグについても同様の結果でした。

原因と対処法

調べるとspanやaのようなインライン要素は上下の高さの指定が出来ないようです。

インライン要素の上下をmarginやpaddingなどで設定したい場合、
「display:inline-block」を使います。
これを使うことでインライン要素をブロック要素の性質に似せることができます。

ポイント

・spanはインライン要素。
・divはブロック要素。
インライン要素の上下の高さを変更したい場合はinline-blockを使う。

marginの場合

早速変更してみます。

<span style="margin:上 右 下 左;display:inline-block;">ほげほげ</span>

spanにmarginが効かない_003こんな感じにspanタグ内のstyleにdisplay:inline-blockを追加します。

spanにmarginが効かない_004プレビューするとmargin-top、margin-bottomが反映されました。

paddingの場合

padding-top、bottomも確認してみます。

まずはdisplay:inline-blockを指定しない場合。
spanにpaddingが効かない_005paddingの場合、適用はされるが上下の行間に影響を及ぼさないため実質効かないということですかね。

続いてdisplay:inline-blockを使ってみます。

<span style="padding:上 右 下 左;display:inline-block;">ほげほげ</span>

spanにpaddingが効かない_006うまくいきました!

まとめ

spanタグやaタグなどのインライン要素に上下の高さを指定するmarginやpaddingが効かない時の対処法でした。

文章内にspanやdivを使う時、改行されるか改行されないか程度しか違いを考えないですが、インライン要素とブロック要素の違いもあるのですね...奥が深いです。

-サイト構築
-

© 2021 ソロ学