Q&A
MDNよりvertical-alignの適用対象はインラインレベルの要素だと確認しました。
（https://developer.mozilla.org/ja/docs/Web/CSS/vertical-align）
しかし、下記のコードにおいて、
同じ階層のimgタグに対してvertical-alignが効くのに対し、
spanタグに対してはvertical-alignが効いていません。
その理由はなぜなのでしょうか？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/style.css"> <title>Document</title> </head> <body> <header> header </header> <section> <div class="test"> <p>aaaa<img src="img/tokyo.png" alt=""><span>bbb</span></p> </div> </section> <footer> footer </footer> </body> </html>
.test p{ line-height: 5; background-color: pink; } /* spanはvertical-alignが効かない */ .test span{ vertical-align: top; } /* imgはvertical-alignが効く */ .test img{ vertical-align: bottom; }
回答2件
0
ベストアンサー
vertical-alignの動作範囲を再度確認されると良いかと思います。
現状のコードであれば、以下のような対応で、希望するレイアウトになるかと思います。
HTML
1<div class="test"> 2 <p>aaaa<img src="img/tokyo.png" alt=""><span class="***">bbb</span></p> 3 <!-- ↑ spanに任意のクラス追加 --> 4</div>
CSS
1.test span.*** { /* ← 任意のクラス追加 */ 2 vertical-align: top; 3 line-height: 1; /* ← 追加 */ 4}
-追記-
間違って、手元の参考画像でのurlで載せてしまい、スミマセン。
投稿2019/08/17 23:30
編集2019/08/17 23:34
総合スコア3523
0
css
1.test p{ 2 line-height: 5; 3 background-color: pink; 4}
のline-heightが見た目に影響を及ぼしていると思います。
line-heightがフォントに余白を入れる --> vertical-alignで上下に移動させる --> 下に余白があるせいで見た目的には真ん中とか変なとこにあるように見える。
大きめの画像を入れるとちゃんとvertical-alignが適用されているが見えると思いますよ。
投稿2019/08/17 15:34
総合スコア116
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。