htmlで画像が真下ではなく、右隣に来てしまう。

Question

以下のhtmlでは、2015.06.17 WEDの下に画像がくるのではなく、画像が右隣に隣接しています。

        <a href="#" class="article-box">
          <h3 class="title">HTML/CSSモダンコーディングTIPS</h3>
          <p class="desc">モダンなコーディングにチャレンジしましょう！</p>
          <time class="date" datetime="2015-06-17">2015.06.17 WED</time>
          <img class="image" src="./images/article.jpg" alt="コーディング画面">
        </a>

上記のhtmlだったら、以下のように表示される(日付の下に画像がくる)と思っていたので、なぜ、日付の右隣に画像が来たのかがわかりません。
(ちなみに、htmlにおいて、日付の後に<br>を入れると、以下の画像のようになりました。)

初心者でお恥ずかしい質問かもしれませんが、2015.06.17 WEDの下に画像がくるのではなく、画像が右隣に隣接してしまった理由がわからないので、教えていただけると幸いです。

mac 10.14.4
google chrome

Answer 1

画像はcss等で特に指定しなければインライン要素（spanタグなどと）同じ扱いだからです。
その画像にdisplay:block;などを指定したらブロック要素扱いになるので文字の下にくるようになります。

Comments

[gunmed]

回答ありがとうございます。
block指定すると、下に表示できました。
ありがとうございました。