inline元素与inline-block元素的margin异常表现问题

这不是inline元素真的拥有了margin-top，而是行内元素的垂直对齐规则造成的视觉错觉：

• 你给inline类型的a和inline-block类型的span都设置了vertical-align:center，意味着这两个元素会以彼此的中心位置对齐。
• 当给span设置margin-top:10px后，这个inline-block元素会相对于父容器顶部向下偏移10px；而受vertical-align:center规则影响，同一行的a元素会自动对齐到span的中心位置，看起来就像a也有了10px的margin-top，但实际上a的margin-top属性依然是无效的。

解决办法 #

你可以根据实际需求选择以下任意一种方案：

1. 调整或移除vertical-align属性
   把vertical-align:center改为vertical-align:top，或者直接删除这行样式，让a元素对齐父容器顶部，不再受span的margin偏移影响：

a, span{
  vertical-align:top; /* 或者直接删除这行 */
}

2. 用padding-top替代margin-top
   如果需要保持元素的垂直居中布局，将span的margin-top:10px替换为padding-top:10px，这样只会让span内部内容下移，不会改变元素整体的偏移位置，也就不会影响行内元素的对齐：

span {
  padding-top:10px; /* 替换原有的margin-top */
  display:inline-block;
  background:red;
}

3. 给父容器设置line-height
   给父div设置与容器高度一致的line-height，配合vertical-align:center，也能避免这种偏移问题：

div {
    background:yellow;
    margin:10px;
    height:70px;
    line-height:70px; /* 值与容器height保持一致 */
}

内容的提问来源于stack exchange，提问作者Priyam Dhanuka