html - Strange behavior of inline-block elements inside absolute positioned parent -

i have few <div>s having display:inline-block, inside absolute positioned parent <div>.

html

<div id='wrap'>   <div id='container'>     <div class='box'></div>     <div class='box'></div>     <div class='box'>&#64;</div>     <div class='box'></div>   </div> </div> 

css

*{  margin:0; } html, body{  height:100%; } #wrap{  position:relative;  background:lightgreen;  height:100%; } #container{  position:absolute;  bottom:0px;  vertical-align:baseline; } .box{  display:inline-block;  width:80px;  height:120px;  background:white;  border:1px solid; } 

when add ascii character codes in of <div>s, strangely other <div>s move up. if remove ascii character <div>s align in same row.

check jsfiddle

i aware of other ways making layout, can make boxes absolute , force them positioned @ bottom of parent, i'm aware of css3 flex.

but i'm interested in specific problem, can explain why happening..? or how can fix is?

update

i not interested in fixing it, since there many ways achieve same alignment. want understand what's happening. question is, divs being being aligned @ bottom default. why other divs aligns @ top when 1 of divs have character inside it? updated fiddle both scenarios

side note: happens when add text inside elements, if add html element instead of character divs still aligns @ bottom.

.box{  display:inline-block;  width:80px;  height:120px;  background:white;  border:1px solid;  vertical-align: top; } 

add vertical-align: top; when