css - Why are these inline-block elements outside their container? -


as illustrated here:

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

the default value vertical-align baseline. set top instead.

http://jsfiddle.net/06z63n7l/

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

Comments

Popular posts from this blog

python - TypeError: start must be a integer -

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

django - Creating multiple model instances in DRF3 -