display: inline-blockを display: inlineにすると三角形の形が崩れる理由が知りたい。

Question

  <div class="top-wrap">
    <p>top</p>

  </div>

.top-wrap {
  position: fixed;
  bottom: 0;
  right: 0;
}

.top-wrap:after {
  content: '';

  border-width: 60px;
  border-style: solid;
  border-color: transparent red red transparent;
  display: inline-block
}

.top-wrap p {
   margin-left: 60px;
  margin-bottom: -80px;
  position: relative;
}

.top-wrap:afterのdisplay: inline-blockをdisplay: inlineにすると三角形の形が崩れ真ん中に幅と高さを持った窪みが出現してしまうのですがなぜこのようになるのでしょうか。inline要素は幅と高さを持たないはずだと思うのですが。

Answer 1

inline要素は幅と高さを持たないので、レイアウトが崩れるのです。

そのCSSで三角形が表示されるのは、border-width: 60px;とすることで、ブロックのサイズが縦横120px確保されて、境界線の左上が透明だからです。

~~inline要素にして幅と高さがなくなるとレイアウトが崩れます。~~幅と高さがなくなるわけではないですね。inlineにすると高さが120px＋フォントの高さになりますね。

Comments

[退会済みユーザー]

inlineにすると高さが120px＋フォントの高さとなるということはinline-blockだとフォントの高さはないということでしょうか。

[hatena19]

ブラウザの検証ツールで調べてみるとそうなりますね。
その原理はちょっと分かりかねますが。