Html 为什么将div显示为inline会导致它们与h1重叠？

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

尝试使两个框相邻排列-我使用

float

left和right属性实现了这一点

但是，当我使用display inline时，它会导致与上面的块元素重叠

h1

。我在这里将其显示为一个表格，因此我在其上设置的背景颜色仅跨越内容的宽度，但这不应改变它仍然是块元素的事实

超过重叠部分，

div

上的

display:inline

也会导致框的大小缩小

有人能解释为什么会这样吗

---

请参见此处的代码：

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

---

尝试将div改为显示：内联块。

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

---

尝试将div改为

display:inline block

。

Nvm刚刚意识到，由于元素之间的空白，它们不是并排出现的，于是找到了一种清除方法。或者使用较小的宽度来解释缺少的那几个%。此外，内联元素显然也尊重“行高”，因此设置为大约55px会将内联div向下移动到标题：D下面。感谢提供了一个解决方案，也让我能够进一步研究这个问题：）.Nvm，刚意识到由于元素之间的空白，它们不是并排出现的，就找到了一种方法来清除这一点。或者使用较小的宽度来解释丢失的那几个%。此外，内联元素显然尊重“行高”，因此设置为大约55px会将内联div向下移动到标题：D下面。感谢提供了一个解决方案，也让我能够进一步研究这个问题：）。