HTMLにおいて、ある要素に影響を受けて別の要素が動いてしまいます。

現在ブログ内の記事一覧ページで使用する、
各記事タイトル等を格納するパーツを試作しておりました。
以下がそのコードです。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
  　<title>TOP</title>
    <style>
        body {
        margin: 0;
        }
        .content_box {
        display: inline-block;
        }
        .img_box {
        display: inline-block;
        height: 300px;
        width: 300px;
        }
        .img {
        display: inline-block;
        height: 200px;
        width: 200px;
        margin: 50px;
        }
       .text {
       display: inline-block;
       height: 300px;
       width: 700px;
       }
</style>
</head>
<body>
    <div class ="content_box">
        <div class="img_box">
            <div class="img">
                <a>ここにイメージ</a>
            </div>
        </div>
        <div class="text">
            <a>1 - ○○○○○○○○</a>
        </div>
    </div>
</body>
</html>

すると.imgにmarginを適用した段階で
.textが下に動いてしまいます。

（画像ではわかりやすいように.content_box　.img_box　.textにborderを適用しております。）

この.textは、.text内の文字列と.img内の文字列が揃うように動いているので、
文字のラインが関係していると考え以下のように

    .text {
    display: inline-block;
    height: 300px;
    width: 700px;
    vertical-align: top;
    }

vertical-align: top;
を加えたところ、解消されました。
これらは一体どういった仕様が原因で起こるのでしょうか。
どなたかご教授お願いいたします。

行動規範の内容に同意します

回答2件

vertical-alignはデフォルトだとbaseline（文字の下端）に揃うようになっています。
display:inline(-block)で横並びにされた要素は、基本はこの文字の下端に合わせて揃えられるため、inline-blockを使う場合は必要に合わせてvertical-alignを指定して上書きする必要があります。

投稿2019/01/22 00:03