为什么带有 display: inline-block 的空子元素会在其父元素中创建空间？

Question

这是一个有子元素的父元素，父元素没有任何宽度或高度属性但子项具有 100% 的宽度和高度并显示： inline-block 。

HTML 和 CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .parent {
        background-color: red;

      }
      .child {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="parent">Hello
      <div class="child"></div>
    </div>
  </body>
</html>

我没想到孩子会占据任何空间，因为它是空的，而父级没有宽度和高度，但它在父级中产生了一个空白空间。

我可以使用显示块来解决这个问题，但我只想知道为什么使用显示内联块时会发生这种情况？

Answer 1

0
投票

将

vertical-align:top

添加到子元素。

为什么带有 display: inline-block 的空子元素会在其父元素中创建空间？

问题描述投票：0回答：1

1个回答

最新问题

为什么带有 display: inline-block 的空子元素会在其父元素中创建空间？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1