html - Why images are aligned to the bottom of a div? -

in following example, image aligned bottom of parent container:

html:

<div>   <img src="https://www.google.com/images/srpr/logo11w.png">   <div>a b c d e f g h j k l m n o p q r s t u v w x y z</div> </div> 

css:

img{     height: 2em;     top: 0px; }  div div {     width: 5em;     display: inline-block; } 

can use jsfiddle reference: https://jsfiddle.net/9nlyr6f6/2/

1. i curious know logic that? rule applies?
2. how change , have image @ top?

because default vertical alignment inline elements baseline.

see https://developer.mozilla.org/en-us/docs/web/css/vertical-align

to change it, set vertical-align property on image other default.

img{      height: 2em;      top: 0px;      vertical-align:top;  }    div div {      width: 5em;      display: inline-block;  }

<div>    <img src="https://www.google.com/images/srpr/logo11w.png">    <div>a b c d e f g h j k l m n o p q r s t u v w x y z</div>  </div>