为什么将我的 div 显示为内联会导致它们与我的 h1 重叠？ [复制]

Question

我只是在学习的早期阶段玩弄边框/内容框 CSS 属性。

尝试让两个框并排排列 - 我已经通过使用 float left 和 right 属性实现了它。

但是，当我使用 display inline 时，它​​会导致与上面的块元素 h1 重叠。我在这里将其显示为表格，因此我在其上设置的背景颜色仅跨越内容的宽度，但这不应该改变它仍然是块元素的事实。

除了重叠之外，div 上的 display: inline 还会导致框缩小。

谁能解释为什么会这样？

请在此处查看代码：https://jsfiddle.net/gouvrze1/

Answer 1

只有块元素遵守宽度和高度规则。内联元素只是随着它们的文本内容流动。重叠是由填充和 div 在 DOM 中更靠下的事实引起的，因此它们是在先前元素之后和之上绘制的。

尝试将您的 div 改为 display: inline-block。