同じ高さの横並びの要素の縦位置が揃わないのは何故？

Question

https://codepen.io/anon/pen/xJBzep

  #aaa {
    font-size: 20px;
    line-height: 1;
    height: 20px;
    display: inline-block;
    background-color: red;
  }
  i {
    height: 20px;
    width: 20px;
    display: inline-block;
    background-color: red;
  }

<span id="aaa">AAAAA</span><i></i>

なぜどちらの要素も高さ20pxなのに縦にずれてしまうのですか？
どうすれば縦位置を揃えることが出来るのでしょうか？

Answer 1

原因はたぶん display: inline-block を指定した要素のデフォルトがベースラインに合わせているからだと思うので、#aaa に vertical-align: top を指定してみてはどうでしょうか。

Answer 2

完成イメージがないのでこれでいいかわからないですけど、
並列にするのであれば1つ外に親を設けて共通部分を切り出し、
個別部分はそれぞれに指定すれば良いかと。

※未検証です。

p {
  height: 20px;
  display: inline-block;
  background-color: red;
}

span#aaa {
  line-height: 1;
  font-size: 20px;
}

i {
  width: 20px;
}

    <p>
        <span id="aaa">AAAAA</span><i></i>
    </p>

Comments

[m.ts10806]

もしかしたらiの幅がとられないかもしれないので
その場合はiにdisplay: inline-block;を入れてみてください。