css - Why are these inline-block elements outside their container? -
as illustrated here:
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; } }
the default value vertical-align
baseline
. set top
instead.
.color-bar > span { display: inline-block; height: 5px; width: 25%; vertical-align: top; }
Comments
Post a Comment