html - 为什么在这个例子中 <ul> <li> 和 <a> 元素的高度不同？

Question

为什么 <ul> 上的高度不同？ <li>和 <a>这个例子中的元素？

http://codepen.io/MonoSM/pen/mPGVrN

HTML

<ul class="links">
  <li class="first">
    <a href="#">My Account</a>
  </li>
  <li>
    <a href="#">My Cart (3 items)</a>
  </li>
  <li class=" last">
    <a href="#">Log In</a>
  </li>
</ul>

CSS

.links { list-style: none; }
.links li { float: right; display: inline-block; }
.links li a { background: grey; margin:5px; padding: 10px; }

You can see image here

Answer 1

ul 元素仅包含已从正常流中移除的元素，因此其高度为 0。

每个 li 元素包含一个行框。它的高度是该行框的高度，使用它的 line-height 属性。

每个元素都是其文本内容的高度。取自字体指标。垂直填充位于它们周围，但不影响其祖先的父级高度，因为 a 元素是 display:inline