为什么两个不同的内联块元素向下移动，如果我们只针对其中一个

Question

我有两个 html 元素，即标签和锚点，它们都是内联的。如果我把他们的display 属性设置为display: inline-block 并且给label margin-top 50px，为什么随着label，anchor tag 也在移动？这里我只有目标标签。

<!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>

Answer 1

两个元素都移动，因为默认 vertical-align 属性。如果您将 vertical-align 更改为 top，那么您将只能移动 label。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Practise</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>

为什么两个不同的内联块元素向下移动，如果我们只针对其中一个

Why two different inline-block elemens go downwards, if we target only one of them

html

css