添加其他元素时，Span元素会变得不对齐

Question

请参阅 - https://jsfiddle.net/59a15a9d/

＆＃13;

＆＃13;

span {
  height: 200px;
  width:200px;
  background: red;
  display: inline-block;
  border: 2px solid green;
  margin: 4px;
  /*float: left*/ /*Second uncomment this*/
}

＆＃13;

<span>hello</span>
<span>hello
<!-- <p>asd</p> --> <!-- first uncomment this -->
</span>

＆＃13;

＆＃13;

＆＃13;

我有2个span元素与＆＃34; inline-block＆＃34;垂直对齐。 CSS。 现在在JSFiddle中按照评论。我有几个问题：

1. 删除第一个注释时，在第二个范围内添加<p>元素，然后第一个范围自动未对齐。为什么呢？

2. Vertical-align属性将修复它。怎么样？

3. 当您删除第二个注释时，它只是向左浮动<span>而不是垂直对齐，它们会正确对齐。浮标对跨度有什么魔力？

与上述无关，这是一个更快速的问题。

当将位置绝对/固定添加到span元素时，为什么它会成为块元素？

Answer 1

  

与上述无关，这是一个更快速的问题。当绝对/固定位置添加到span元素时，为什么它会成为块元素？

浏览器认为它不再需要任何相对测量，因为它使用绝对/固定位置，因此所有环境项都将被忽略。