为什么这与display:inline-block和一些文本没有正确对齐? [重复]

问题描述 投票:2回答:1

这个问题在这里已有答案:

我想知道为什么当div中有文本或任何其他元素与display:inline-block时它的对齐方式不同?我知道vertical-align修复它,但我很想知道浏览器如何确定这样显示。

  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>

enter image description here

html css
1个回答
0
投票

vertical-align的默认值(如果您不声明任何内容)是基线

除非被覆盖,否则此规则适用。当文本放在内联块中时,该文本将为内联块创建基线。

作为参考,这里有关于CSS-Tricks的文章

© www.soinside.com 2019 - 2024. All rights reserved.