当我们将两个或多个内联元素（例如label和a标签）设置为display: inline-block时，可能会遇到一个令人困惑的问题：当我们尝试使用margin-top属性来调整其中一个元素的位置时，相邻的元素也会跟着移动。这是因为inline-block元素默认的vertical-align属性在起作用。
vertical-align属性的作用
vertical-align属性用于指定inline-block元素与其父元素或同一行内其他元素的垂直对齐方式。其默认值为baseline，这意味着元素会与其父元素的基线对齐。
在这种情况下，当给label元素设置margin-top时，label元素相对于其基线向上移动，而相邻的a元素仍然保持与基线的对齐。由于两个元素都在同一行内，为了保持整体的垂直对齐，a元素也会跟着向上移动，从而造成“一起移动”的错觉。
解决方案：修改vertical-align属性
要解决这个问题，我们需要显式地设置元素的vertical-align属性，使其不再依赖默认的基线对齐。常用的解决方案是将vertical-align设置为top、bottom或middle。
例如，我们可以将a元素的vertical-align属性设置为top，使其与label元素的顶部对齐：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Align Example</title>
<style>
label {
margin-top: 50px;
display: inline-block;
}
a {
vertical-align: top;
}
</style>
</head>
<body>
<label>Hello</label>
<a href="#">iamlink</a>
</body>
</html>在这个例子中，我们只修改了a标签的样式。通过设置vertical-align: top;，a标签不再受label标签margin-top的影响，而是始终与其顶部对齐。
其他可能的解决方案
除了修改vertical-align属性，还有其他一些方法可以解决这个问题，但可能需要修改HTML结构或使用其他CSS属性：
- 使用Flexbox或Grid布局： 这两种布局方式提供了更强大的控制能力，可以轻松实现元素的垂直对齐。
- 将元素包裹在容器中： 可以将label和a元素包裹在一个容器中，然后使用CSS来控制容器内的元素对齐方式。
总结
理解inline-block元素默认的vertical-align行为对于解决垂直对齐问题至关重要。通过显式地设置vertical-align属性，我们可以精确地控制元素的垂直位置，避免出现非预期的布局行为。在更复杂的布局场景中，考虑使用Flexbox或Grid布局，它们提供了更灵活和强大的布局控制能力。
