inline-blockでテキストオーバした際、要素がズレる理屈について

Question

初歩の初歩的なことで恐縮ですが、
inline-blockで要素を横に並べ、テキストが指定幅を超えてしまったところ、
隣り合う要素が1行づつ下がってしまうことに気づきました。

flex-boxを使えば、解決できることは理解しているのですが、
基礎を学ぶ身として、理屈を抑えておきたいと考えた次第です。

また、要素の高さを揃える方法があるのならば、ご教授お願い致します。

該当のソースコード

div class="box">
  <a href="">ボタン</a>
  <a href="">ボタン</a>
  <p>このテキストがwidthの指定範囲をオーバーすると、ボタンが文字列の分だけ低くなる理屈をご説明いただきたく思います。</p>
</div>

ソースコード
.box{
  p,a{
    display: inline-block;
  }
  p{
    width: 500px;
  }
}

Comments

[kei344]

CSSではなくSCSSやSASSでは？

[fukik]

おっしゃるとおりです、、
ご指摘ありがとうございます。

[kei344]

ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。

Answer 1

一行下に下がってしまう要素に対してvertical-align: topを指定すると解決するはずです。

今回でいうとCSSを以下のように編集して下さい。

.box{
  p,a{
    display: inline-block;
    vertical-align: top /*これを追加*/
  }
  p{
    width: 500px;
  }
}

原因はインライン要素のデフォルトがベースラインだからです。

「abcdefgxyz」などの時、一本の線が見えませんか？これがベースラインです。
つまりこの、下のラインに合わせているため、他の要素も下に行ってしまうのです。
これを解消するには、文字を合わせるのをベースラインから上にすればよいです。
該当のコードでも上に設定しています。

こちらに分かりやすく記載されています。参考になれば幸いです。

簡単な図も作ってみました。

Comments

[fukik]

asuchi0819様
この度は、非常に丁寧にご回答いただきありがとうございます。

vertical-align: top　は「1行下げている原因となっている要素につけるもの」という、自身の誤認識に気づくことができました。

理解を深めるご協力いただけたことを感謝致します！

[kyoya0819]

解決したようで何よりです。