为什么这些内联块元素在它们的容器之外？

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; 
}