为什么应用于外部div的min-height属性会增加内部div的高度？

Question

HTML：

<div>
  <div></div>
</div>

CSS：

div {
  background: #BCCF03;
  min-height: 300px
}

div div {
background: #5DAF33;
height: 22px
}

JSfiddle

正如我们所看到的，min-height仅适用于外部div，但它也会增加内部div的高度。为什么会这样？ min-height不是继承的财产。

Answer 1

这是你写css的方式。给divs类，它不会发生。

HTML：

<div class="outer">
  <div class="inner"></div>
</div>

CSS：

.outer {
  background: #BCCF03;
  min-height: 300px
}

.inner {
background: #5DAF33;
height: 22px
}

进一步详细说明，您将所有div的min-height设置为300px。这将是所有div的情况，除非事后明确设置。

Answer 2

内部的东西是div，因此你在第一个css块中给出了300分钟的宽度。最小宽度覆盖宽度。只需给内部div一个＆＃34;显示：inline＆＃34;

div {
  background: #BCCF03;
  min-height: 300px
}

div div {
background: #5DAF33;
height: 22px;display:inline;
}

所以它仍然是22宽度而不是最小宽度值。