Dlaczego span zjeżdża w dół?

pytanie zadane 5 kwietnia 2018 w HTML i CSS przez Przemysław Obywatel (1,510 p.)

Cześć!

Mam taki oto kod:

<body>
	<div class="container">
		<img src="graphic/img.png" />
		<span>text</span>
		<span>text</span>
	</div>
</body>

CSS:

.container {
	display: block;
	background-color: red;
	height: 100px;
	position: relative;
}
	
img {
	height: 90%;
	display: inline-block;
}
	
span {
	display: inline-block;
	width: 300px;
	height: 100px;
	background-color: green;
}

I taki wynik:
Dlaczego <span> zjeżdża w doł?
Ma taką samą wysokość (100px) jak ten czerwony div. W kodzie jest bezpośrednio za zdjęciem.
Próbowałem margin: 0, padding: 0 - nie pomogło.
Próbowałem też ustawić top: 0
Dla position: relative - nic się nie dzieje, natomiast dla position: abosule. ustawia się już poprawnie u góry, ale oba spany są w tym samym miejscu (przesuwa się też w osi poziomej :( )