Q&A
横からすみません。低評価された方、参考までに理由を教えていただけますか？
以下のHTML、CSSをブラウザ（chrome）で開くと、ボタンの高さが揃わず、ずれてしまいます。
chromeの開発者ツールでそれぞれのボタンに適用されているスタイルの違いを確認してみましたが
違いがみつけられませんでした。
html
1<html> 2<link rel="stylesheet" href="./test.css" type="text/css"> 3 4html(test.html) 5<body> 6 <div class="button_class"> 7 <button >＞</button> 8 <button >↑↓</button> 9 <button >a </button> 10 <button >あ </button> 11 </div> 12</body> 13</html>
css(test.css)
css
1.button_class button{ width : 100px; height: 50px;}
原因は何でしょうか？
確認した環境
OS:fedora32
ブラウザ: google chrome バージョン: 85.0.4183.102（Official Build） （64 ビット）
回答3件
0
こんにちは。
こちらはいかがでしょうか。
css
1.button_class button { 2 vertical-align: top; 3}
vertical-align - CSS: カスケーディングスタイルシート | MDN
参考：
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
Visual formatting model details
（勝手訳）inline-blockのベースラインは、通常のフローでは最後の行ボックスのベースラインになります。行ボックスがないか、'overflow' が 'visible' 以外の場合、マージンボックス下辺になります。
投稿2020/09/18 02:51
編集2020/09/18 03:12総合スコア36078
0
ベストアンサー
Chromeブラウザでの結果
Firefoxブラウザでの結果
これを見るとChromeの場合、タグの書き方だけで変わっていますね
ただFirefoxではそれでも治らないので
CSSでブロック要素を下揃えにする方法を現役エンジニアが解説【初心者向け】の方法で中央に配置するようにしました。
経験ではボタンに表示させる文字のフォント種類と文字の種類によって影響がでたりします。
フォント情報のアセンダライン・ベースライン・ディセンダラインを変換のしかたの影響かとも思います。
(この辺は個人的な感想です)
ボタンなどを並べる際はこんな現象もあると思ってキチンと指定しておいたほうがよいですね
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8" /> 5 <style type="text/css"> 6 .button_class button{ 7 width:100px; 8 height: 50px; 9 } 10 .button_class2 { 11 display: flex; 12 align-items: center; 13 } 14 .button_class2 button{ 15 width: 100px; 16 height: 50px; 17 margin: 0 5px 0 0; 18 } 19 </style> 20</head> 21<body> 22 <!-- 修正前 --> 23 <div class="button_class"> 24 <button >＞</button> 25 <button >↑↓</button> 26 <button >a </button> 27 <button >あ </button> 28 </div> 29 <hr style="width:100%;" /> 30 <!-- 修正後 --> 31 <div class="button_class"> 32 <button>＞</button> 33 <button>↑↓</button> 34 <button>a </button> 35 <button>あ </button> 36 </div> 37 <hr style="width:100%;" /> 38 <!-- 修正後 --> 39 <div class="button_class2"> 40 <button>＞</button> 41 <button>↑↓</button> 42 <button>a</button> 43 <button>あ</button> 44 </div> 45 <hr style="width:100%;" /> 46</body> 47</html>
投稿2020/09/17 23:27
総合スコア2506
みなさんの回答がどれも正解でどれもすばらしく、全員にベストアンサーをあげたいのですが、
私がベースラインという概念を調べるきっかけとなったこちらの回答にベストアンサーをあげたいと思います。
0
文字が持ってる幅のような気がしなくもないですが、ひとまず、floatすれば揃います。
css
1 2.button_class button{ 3 width : 100px; 4 height: 50px; 5 float:left; /*追加*/ 6} 7
違いがみつけられませんでした。
沢山ありますね。違い。
buttonタグの中もそうですが、テキストにスペースが含まれています。
この手のスペースはレイアウトに微々たる影響を与える可能性があるので、詰めた方が良いかと思います。
どうしても空間取りたければmarginやpaddingで調整を。
問題切り分けするならHTMLを色々組み替えてみることです。
html
1 <button >＞</button> 2 <button >あ </button> 3 <button >↑↓</button> 4 <button >a </button> 5
html
1 <button >＞</button> 2 <button >あ </button> 3 <button >あ </button> 4 <button >＞</button>
html
1 <button >＞</button> 2 <button >＞</button> 3 <button >＞</button> 4 <button >＞</button>
html
1 <button >あ </button> 2 <button >＞</button> 3 <button >＞</button> 4 <button >あ </button>
投稿2020/09/17 22:45
編集2020/09/17 23:05
総合スコア80850
アドバイスの通り、floatを使用したらきれいに揃いました。
時間をかけて調べてもたどり着けなかったので助かりました。
ありがとうございます。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/18 04:04
2020/09/18 04:45
2020/09/20 21:31