img标签的diplay属性设置为block时带来的诡异问题

Question

下面是我在写css的时候需要的一个问题始终无法理解：代码如下

html部分

    <div class="a12">
            <div>
                <img src="image/act_01.jpg">
                <h3>上海活动</h3>
                <p>全新海岸线观战点</p>
            </div>
            <div>
                <h3>广州活动</h3>
                <p>全新海岸线观战点</p>
                <img src="image/act_02.jpg">
            </div>    
            <div>
                <img src="image/cssspite.gif">
                <h3>香港活动</h3>
                <p>全新海岸线观战点</p>
            </div>
            <div>
                <img src="image/act_04.jpg">
                <h3>台湾活动</h3>
                <p>全新海岸线观战点</p>
            </div>
    </div>

情况1：当css内的img标签的display属性不设置时，浏览器的效果如下

    <style type="text/css">
    .a12>div{display: inline-block;border:1px solid red;}
    </style>

情况2：当css内的img标签的display属性设置为block时，浏览器的效果如下

    <style type="text/css">
    .a12>div{display: inline-block;border:1px solid red;}
    img{display: block;}
    </style>

我的问题：

（请注意我第二个div中的img标签和其他的div中的img标签顺序不一样哈）

1. 为什么当img的diplay属性设置为block，变成块级元素时候,第二个div中的h3和p标签位置仍然没有变？不应该是顶替上来么？

Answer 1

看到你截图的效果，我猜测应该是div设置为inline-block样式引起的，图片中所有文字都是在同一水平线的，所以inline-block的元素默认vertical-align属性为middle，你可以把div的vertical-align修改为top试试，第一次回答问题，比较紧张，不正确的地方还请指正！！✨??✨