Question

Why first and last inline-block items taking height at bottom not top?

Live example : http://dabblet.com/gist/3526764

HTML

<a href="#" class="slider-previous">previous</a>
<img src="http://lorempixel.com/81/61/city/1" alt="">
<img src="http://lorempixel.com/81/61/city/2" alt="">
<img src="http://lorempixel.com/81/61/city/3" alt="">
<img src="http://lorempixel.com/81/61/city/4" alt="">
<img src="http://lorempixel.com/81/61/city/5" alt="">
<img src="http://lorempixel.com/81/61/city/6" alt="">
<img src="http://lorempixel.com/81/61/city/7" alt="">
<img src="http://lorempixel.com/81/61/city/8" alt="">
<a href="#" class="slider-next">Next</a>

CSS

img {display:inline-block;}
.slider-previous {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat #eee;height: 81px;width: 20px;;display:inline-block;}
.slider-next {text-indent:-99999px;background: url(https://www.entropay.com/sites/entropay.com/themes/entropay_c/images/icons/arrow_icon.png) no-repeat #eee;height: 81px;width: 20px;;display:inline-block; }

I want to make the arrow vertical aligned to the images. is it not possible without negative margin-top or float?

Answer 1

this is due to the lackness of a vertical-align defined for the images

try to add

img {
   vertical-align: bottom
}

Example dabblet: http://dabblet.com/gist/3526905