为何仅设置单个inline-block元素margin-top时相邻元素同步下移

这个现象是行内格式化上下文（IFC）中行内级元素默认基线对齐规则导致的，和a标签本身有没有设置偏移样式没有关系，具体逻辑：

• 代码里的<label>被设置为display: inline-block属于行内块元素，旁边的<a>是默认inline行内元素，二者处在同一个行内格式化上下文中，默认垂直对齐规则都是vertical-align: baseline（基线对齐）。
• 普通inline元素不支持上下方向的margin，但inline-block元素支持，所以给label设置的margin-top: 50px会正常生效，把整个label元素连同它内部的文本整体向下推50px，label的文本基线也跟着同步下移。
• 按照基线对齐的强制规则：同一行的所有行内级元素，需要将自身的文本基线和当前行盒的基线对齐。普通inline元素（a标签）的基线就是自身文本的基线，没有内容溢出的inline-block元素的基线是其内部最后一行文本的基线。为了满足这个对齐要求，a标签会自动调整自身在垂直方向的位置，直到自己的文本基线和下移后的label文本基线处在同一水平线，最终视觉上就是a标签跟着label一起向下移动。

快速验证方案 #

只要给任意一个元素设置非baseline的垂直对齐值，比如给label或者a加vertical-align: top，打破默认基线对齐规则，a标签就不会出现跟随下移的现象。

问题复现代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Practise</title>
    <style>
      label{
          margin-top: 50px;
          display: inline-block;
      }
    </style>
</head>
<body>
    <label>Hello</label>
    <a href="#">iamlink</a>
</body>
</html>

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