为什么<ul> <li>和<a> elements on this example?

Question

Why is height different on <ul> <li> and <a> elements on this example?

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元素包含一个行框。它的高度是该行框的高度，使用其行高属性。

每个元素都是其文本内容的高度。取自字体指标。垂直填充物围绕它们放置，但不影响它们的祖先＆＃39;父级别，因为元素为display:inline