两个内联块元素如何影响彼此的对齐方式

Question

如果我们有两个彼此相邻的元素，并且显示为

inline-block

，则当为两个元素之一设置垂直对齐时，较大的块（就高度而言）似乎会影响另一个元素的位置。

它实际上是如何运作的？我们如何想到元素将驻留在一条线上，当垂直对齐更改时，我们可能只是认为它相对于该线移动。不知怎的，我无法理解为什么另一个元素似乎也在移动。

我将用一些例子来说明。所以经历这个 link（这个问题已被标记为重复）我确实理解第一个 div 设置了内联块的基线。对于以下代码中的 e、g，gjpiy 设置基线，而其后的另外两个内联块 div 位于此行的above。

.first, .second{
    width: 100px;
    display: inline-block;
 }
 
 .first{
    height: 100px;
    background: red;
 }

 .second{
    height: 30px;
    background: yellow;
  }
  
  .simpleDiv{
   display: inline-block
  }

<div class="simpleDiv">gjpiy</div>
<div class="first"></div>

<div class="second"></div>

但我的问题有所不同。 现在我的问题是：

1. 如果将

   vertical-align

    更改为更大的 div，所有三个块都会向上移动。
   

   .first, .second{
       width: 100px;
       display: inline-block;
    }
    
    .first{
       height: 100px;
       background: red;
       vertical-align:top;
    }
   
    .second{
       height: 30px;
       background: yellow;
     }

   <div style="display: inline-block">gjpiy</div>
   <div class="first"></div>
   
   <div class="second"></div>

2. 如果更改第二个 div（较小的那个）的

   vertical-align

   ，则只会向上。

.first, .second{
    width: 100px;
    display: inline-block;
 }
 
 .first{
    height: 100px;
    background: red;
 }

 .second{
    height: 30px;
    background: yellow;
    vertical-align:top;
  }

<div style="display:inline-block">gjpiy</div>
<div class="first"></div>

<div class="second"></div>

这就是我所说的更大的元素

似乎有影响任何人都可以澄清吗？

Answer 1

这本身并不是真正的“答案”，但确实说明了您在哪里看到带有

inline-block

 的跨度，有或没有内容文本（强制为 

 

）也在这里发挥作用。前三者都有内容；最后两个布局与 2/3 相同，但没有内容文本。

此参考很有用：
• https://stackoverflow.com/a/17337172/125981
对于视觉效果来说，这有帮助：
• 为什么这个内联块元素的内容不垂直对齐
另一个：
• CSS - 在下降时显示文本而不是基线？

我的评论中的规范参考也是如此：（向下滚动到该部分的底部。）

https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align

MDN 流程讨论参考

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flow_layout/Block_and_inline_layout_in_normal_flow 底部也包含一些指向 BLOCK 和 INLINE BLOCK 的链接。

body {
  text-align: center;
  border: 1px solid #00FFFF;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

body * {
  line-height: 1em;
}

.block-me {
  display: inline-block;
  border: solid 1px #0000FF;
}

.first,
.second {
  width: 100px;
}

.first {
  height: 100px;
  background: red;
}

.second {
  height: 30px;
  background: yellow;
}

.block-meX.line-rules {
  width: 90vw;
  height: 1px;
  background-color: #FF00FF;
  vertical-align: baseline;
  text-align: center;
  border: solid 1px;
}

.block-meX.line-rules:nth-of-type(2) {
  width: 70vw;
  height: 1px;
  border-color: #00FF00;
  vertical-align: baseline;
  margin-top: -6em;
}

<div class="block-me">gjpiy</div>
<div class="block-me first">&nbsp;</div>
<div class="block-me second">&nbsp;</div>
<div class="block-me first"></div>
<div class="block-me second"></div>
<hr class="line-rules block-meX"></hr>
<hr class="line-rules block-meX"></hr>