多个垂直对齐属性相同的CSS行

Question

正在查看vertical-align的{​​{1}}属性。我已经使用了很多，通常你可以像这样使用它：

＆＃13;

＆＃13;

CSS

＆＃13;

div {
  background-color: green;
  overflow: hidden;
  height: 100px;
}

#text {
  background-color: powderblue;
  padding: 5px;
  vertical-align: 30px;
}

＆＃13;

＆＃13;

＆＃13;

然而，我不明白的是，如果<div> Texttext <span id="text">Texttext</span>Texttext </div>被更改，这会影响其他内联元素的位置（在这种情况下为其他文本）

例如，如果我们将vertical-align从30px更改为-30px：

＆＃13;

＆＃13;

vertical-align

＆＃13;

div {
  background-color: green;
  overflow: hidden;
  height: 100px;
}

#text {
  background-color: powderblue;
  padding: 5px;
  vertical-align: -30px;
}

＆＃13;

＆＃13;

＆＃13;

结果是跨度之外的文本（没有<div> Texttext <span id="text">Texttext</span>Texttext </div>属性）从位置完全改变。

问题

1. 为什么垂直对齐还会影响除了放置属性的元素之外的其他元素？
2. 这无论如何与行高有关吗？行高可以改变vertical-align属性的行为吗？