为什么<span>、<img>的margin-top值会相互影响？已设置为inline-block
查询
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为什么会出现这种情况呢？
展开
收起
1
条回答
写回答
写回答
-
IT从业每一行的元素字符什么的都是 被一个 默认的 line box的东西包裹的，这个是默默，这也就是为什么你写的每一行东西 都是对其一排排的显示的原因了。具体你可以去百度或google一下。我看过一个专门的文章。还有就是，line-box的高度是由没一行的字符内容或标签元素的最大高度决定的。
扯得有点远了，回过头来讲。本来他们都是行内元素，都是显示在一排，你就可以想象他们是被同一个东西包裹在一起的，所以说当你给img加了顶部外边距的时候，他就把整个一行给顶开了，span本来也在这一行里面，所以整个一行下来了之后，它自己也下来了。不知道有没有解释清楚，
2019-07-17 19:33:16赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
