CSSでinline-blockを設定した場合にmargin-bottomが効かない

Question

<div>
  <img src="画像" height="250px" width="190px">
  <span style="display:inline-block; margin-bottom:10px;">text</span>
</div>

画像の下に配置したテキストを少し上に持ちあげたいのですが、margin-bottomが効きません。
padding-bottomも試しましたが変化がありません。

どうすればいいですか？
もしかすればinline-blockを設定すれば、marginやpaddingは効かなくなるのでしょうか？

Answer 1

すこし大掛かりになるのですが、display: flex;を使うなら以下のような形だと思います。

div {
  display: flex;
}
img {
  display: block;
}
span {
  display: block;
  /* align-selfに指定可能な値を調べてみてください */
  align-self: flex-end;
}

Answer 2

vertical-align: bottom;も追加してください。