CSS处理高度与宽度不同？

Question

在this podcast上声明CSS宽度传递给子节点，但高度传递给父节点。相关部分从11:43开始，持续几分钟。

虽然我很遗憾地发现很容易相信CSS做了类似的奇怪事情，但我希望看到一个示例页面来证明这一点。

有人可以制作一个页面，清楚地显示高度是向上而不是向下传递吗？

Answer 1

向上向下（外部到内部）。外部高度不会影响内部。

div {
  border: 1px solid;
}

.outside {
  height: 200px;
}

<div class="outside">
  <div class="inside">Inside</div>
</div>

向下向上（内部到外部）。内部高度确实影响外部。

div {
  border: 1px solid;
}

.inside {
  height: 200px;
}

<div class="outside">
  <div class="inside">
    Inside
  </div>
</div>