高度自动的父元素高于最高子元素答案

【问题标题】：Parent Element with height auto is higher than highest child高度自动的父元素高于最高子元素
【发布时间】：2016-11-02 17:17:14
【问题描述】：

我的 CSS / HTML 有一个奇怪的问题。我有一个 LI，其中包含两个 DIV，每个 15px 高度：但是所有的浏览器都会计算 LI > 15px 的高度。元素也垂直移位。在我看来，LI 的高度应该是 15px。 LI 中的第一个 DIV 是文本，第二个 DIV 只是用于显示背景图像。如果用 Firefox 开发者工具查看高度，每个 div 的高度不超过 15px。有人可以向我解释为什么会这样吗？

只需在最新的 Firefox 中打开下面的代码。

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body style="font-size:12px;">
  <div style="min-height:500px; width:20%; margin:auto; background-color:red;">
  <ul style="background-color:green;">
  <li style="background-color:yellow;">
  <div style="display:inline-block;width:90%">li #1</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </li>
    <li style="background-color:yellow;">
  <div style="display:inline-block;width:90%">li # 2</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </li>
  </ul>
  </div>
  </body>
</html>

没有使用额外的 CSS。如果将 LI 替换为 DIV，它仍然具有相同的行为

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body style="font-size:12px;margin:0;padding:0;">
  <div style="min-height:500px; width:20%; margin:auto; background-color:red;">
  <div id="parent1">
  <div style="display:inline-block;width:90%">li #1</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </div>
  <div id="parent2">
  <div style="display:inline-block;width:90%">li # 2</div>
  <div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
  </div>

  </div>
  </body>
</html>

如果我给父 div 的内部 div 样式属性“float:left;”一切看起来都应该是这样。我想了解为什么浏览器会给父 div 额外的 4px，并让它看起来很糟糕。

如果将父 DIV 的高度设置为 15px，它看起来应该是这样的。但是如果不设置高度，高度是18px。浏览器如何计算 18px ？每个孩子的高度只有15px。

【问题讨论】：

您没有共享您的 CSS，但您的问题是 <li> 标签（以及大多数标签）在浏览器中具有默认样式。在这种情况下，您的 15px 高度是由默认填充添加的。所以 li 会因此而变得更大。阅读 CSS 盒子模型。这应该作为重复关闭。
* { Box-sizing: border-box; } : To border-box or not to border-box all elements?的可能重复
没有更多的 CSS。在 IE、Chrome 和 Firefox 中的行为是相同的。如果您查看开发工具中的“计算”选项卡并选择 LI 中的第一个 div，它的高度是 15px。 LI 中的第二个 div 也有 15px 的高度。但是 LI 本身的计算高度为 19px；我将 LI 的内容包装在 DIVS 中，并删除了 UL/LI 标签。行为与之前相同，子 DIV 的最大高度为 15px，但父 DIV 的高度为 19px。仅默认浏览器 CSS。浏览器开发工具（IE、Chrome、Firefox）都没有显示任何填充、边距等。

标签： html css

【解决方案1】：

因为内联布局有空间。喜欢：

<div style="background-color: black; width: 50px">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    <!-- there is a space here, maybe 4px or other size -->
 </div>

所以问题是如何删除内联空间。有一些方法：

使用 font-size: 0 ，也可以设置“空格”为0。

<div style="background-color: black; width: 50px;font-size:0">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    </div>

让孩子成为障碍。因为块元素不会留下空间。

    <div style="background-color: black; width: 50px">
      <div
        style="
          display: block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    </div>

使用float（现在不推荐，改用flex）

    <div style="background-color: black; width: 50px; overflow: hidden">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
          float: left
        "
      />
    </div>

使用弹性盒

    <div style="background-color: black; width: 50px; display: flex">
      <div
        style="
          display: inline-block;
          width: 50px;
          height: 50px;
          background-color: red;
        "
      />
    </div>

您也可以从以下链接中学习：

【讨论】：

【解决方案2】：

这是因为您正在制作 DIV inline-block，这意味着它们将像任何其他内联元素一样布置在行框中，这意味着在同一行上为潜在文本的长度留出空间。

DIV 的vertical-align: bottom 将解决这个问题。

【讨论】：