为什么这些内联块元素在容器外？

Question

如图所示：

http://jsbin.com/vavuvo/2

HTML

<div class="color-bar">
  <span></span><span></span><span></span>
</div>

LESS

.color-bar {
  display: block;
  height: 5px;
  border: 1px solid red;

  > span {
    display: inline-block;
    height: 5px;
    width: 25%;
  }

  > span:nth-child(1) {
    background: blue;
  }
  > span:nth-child(2) {
    background: green;
  }
  > span:nth-child(3) {
    background: purple;
  }
  > span:nth-child(4) {
    background: orange;
  }
}

Answer 1

vertical-align的默认值为baseline。只需将其设置为top。

http://jsfiddle.net/06z63n7L/

.color-bar > span {
    display: inline-block;
    height: 5px;
    width: 25%;
    vertical-align: top;
}