当サイトの行間の調整時、pタグを使うと都合が悪かったのでspanタグにmargin-bottom;を使ったところ効かなかったので備忘録です。
同様にリンクに使うaタグにもmargin-bottom、topが効きませんでした。
marginだけではなく、padding-top、bottomも効きません。
全部効かないわけではなく、左右は効いている様子...
少し詰まりましたが簡単に解決できました。
インライン要素の上下を指定するにはdisplay:inline-blockを使います。
この記事の目次
spanやaタグにmarginが効かない
sytle内にmarginを指定したところ上下のみ効きませんでした。
分かりやすいようにtop、bottom、left、rightの4つをそれぞれ記述してみました。
ブラウザの開発者ツールで確認してみると、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タグ内のstyleにdisplay:inline-blockを追加します。
プレビューするとmargin-top、margin-bottomが反映されました。
paddingの場合
padding-top、bottomも確認してみます。
まずはdisplay:inline-blockを指定しない場合。
paddingの場合、適用はされるが上下の行間に影響を及ぼさないため実質効かないということですかね。
続いてdisplay:inline-blockを使ってみます。
<span style="padding:上 右 下 左;display:inline-block;">ほげほげ</span>
うまくいきました！
まとめ
spanタグやaタグなどのインライン要素に上下の高さを指定するmarginやpaddingが効かない時の対処法でした。
文章内にspanやdivを使う時、改行されるか改行されないか程度しか違いを考えないですが、インライン要素とブロック要素の違いもあるのですね...奥が深いです。
