为什么<span>、<img>的margin-top值会相互影响？已设置为inline-block

Question

<div>
<img src="images/search.png" >
<span class="span-spec">查询</span>
</div>

img{

margin-left: 10px;
margin-top: 20px;
display: inline-block;

}
.span-spec{

color: black;
font-size: 14px;
margin-top: 28px;
display: inline-block;

}

我想设置文本和图片中心线是对齐的，所以设置了不同的margin-top值，但是改变其中一个的margin-top值也会影响另一个，设置为inline-block为什么会出现这种情况呢？

Answer 1

深入解释的话 实际上呢，每一行的元素字符什么的都是 被一个 默认的 line box的东西包裹的，这个是默默，这也就是为什么你写的每一行东西 都是对其一排排的显示的原因了。具体你可以去百度或google一下。我看过一个专门的文章。还有就是，line-box的高度是由没一行的字符内容或标签元素的最大高度决定的。

扯得有点远了，回过头来讲。本来他们都是行内元素，都是显示在一排，你就可以想象他们是被同一个东西包裹在一起的，所以说当你给img加了顶部外边距的时候，他就把整个一行给顶开了，span本来也在这一行里面，所以整个一行下来了之后，它自己也下来了。不知道有没有解释清楚，望采纳！

Answer 2

行内默认对齐模式是vertical-align:baseline。改成vertical-align:middle可以满足你的需求。

Answer 3

<img src="images/search.png" ></img>
这里是不是写错了呢

Answer 4

magrin-top如果撑开了父元素，也会导致内部的其他元素都相对应的移动。
可以试着去掉margin-top为img和.span-spec都加上vertical-align:middle。