同一个div内span加了margin-top，往下移动，为什么左边的img也跟着往下移动了？

Question

<div class="header" >
        <div class="header_1">
            <a class='header_1_1' href='index.html' >                                               
                 <img src = '../img/logo.jpg' >
                 <span>盛世翌豪</span>
             </a>      
        </div>
        <div class="header_2">
        </div>
 </div>

.header_1{
    margin-left:50px;
    height:100px;
    float:left;
}
.header_2{
    
    height: 100px;
    float:right;
}
.header_1_1{
    display:inline-block;
    height:100px;
}
.header_1_1 img{
    height:80px;
}
.header_1_1 span{
    display:inline-block;
    margin-top:80px;
    font-size:30px;
    
}

Answer 1

CSS vertical-align 属性

Answer 2

行内块元素,它们的默认对齐方式是vertical-align:baseline;图片会追着span要跟它保持队形.

Answer 3

img标签是行内块元素，所以需要将img标签 float:left来达到你想要的效果

Answer 4

img和span都加浮动

.header_1_1 img{
     float:left;
    height:80px;
}
.header_1_1 span{
     float:left;
    display:inline-block;
    margin-top:80px;
    font-size:30px;
    

Answer 5

行内元素的排列规则，有一个对齐基准。