老师的代码中

相关截图：

a标签

li标签

想请教一下，我了解了a标签中的图片与a中的基线对齐 所以留出来下面的空档，但是img既然是a中的元素为什么a的上限没有被扩展了，

相关代码：

<div class="ctn-block">
        <div class="child child-1"></div>
        <div class="child child-2"></div>
        <div class="child child-3"></div>
        <div class="child child-4"></div>
        asd
</div>

相关代码：

 .ctn-block{
            background-color: #bbb;
        }
        .ctn-block .child {
            display: inline-block;
            width: 100px;
            background-color: aliceblue;
        }
        .ctn-block .child-1 {
            height: 100px;
            vertical-align: middle;
        }
        .ctn-block .child-2 {
            height: 300px;
            vertical-align: middle;
        }
        .ctn-block .child-3 {
            height: 400px;
            vertical-align: baseline;
        }
        .ctn-block .child-4 {
            height: 600px;
            vertical-align: middle;
        }

相关截图：

我看到这个div就包裹住了，是a标签的问题吗

相关截图：

​

然后就是为什么li包裹的只是img，a多出的一部分根本没在，为什么了