为什么inline-block元素并排，会以 margin-top 值大的为准？

<style type="text/css">
        body {
            background-color: #ececec;
        }
        
        .div-1 {
            width: 500px;
            height: 500px;
            margin: 50px;
            border: 1px solid #000000;
            position: relative;
        }
        h1{
            display: inline-block;
            background-color: aqua;
        }
        
        .div-2 {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: #4169E1;
        }
    </style>

    <body>
        <div class="div-1">
            <h1>hello,world</h1>
            <div class="div-2">

            </div>

        </div>

    </body>

如图、我并没有给 h1 标签设置 margin，但是为什么它会在下面和 div 并排，而不是上面？

图片描述