Question

我想知道当div内包含display的文本或任何其他元素时，其对齐方式不同的原因：inline-block？我知道垂直对齐可以解决此问题，但我很好奇知道浏览器如何确定以这种方式显示。

  div {
    width: 100px;
    height: 100px;
    background: #dd6b4d;
    display: inline-block;
/*     vertical-align: top; */
  }
  
  .inner {
    width: 50px;
    height: 50px;
    background: green;
  }

<html>
<body>
  <div></div>
  <div>aaa</div>
  <div>
    <div class="inner"></div>
  </div>
</body>
</html>

Answer 1

vertical-align的默认值（如果未声明）为基准

除非被覆盖，否则此规则适用。将文本放入内联代码块后，该文本将为内联代码块创建基线。

作为参考，这里是CSS-Tricks

上的文章

为什么这与显示不正确对齐：内联块和一些文本？

1 个答案: