Html 为什么大纲比它的div大？

更新

为了让输入恢复到我想要的大小，我必须去掉填充和边框。以下方面完成了这项工作：

*{padding:0; margin:0; border:0;}

多亏了CBroe，我发现这是FF所独有的，它在

输入中添加了一个默认边框.75px和一个填充1.5px。总共大约4.5px。铬不

更新2

上面的修复只将子元素恢复到我认为应该的大小。下面接受的答案显示FF有一个错误，它解释了为什么大纲没有按应有的方式运行，即只对父级进行大纲，而不对绝对位置的子级进行扩展


我有两个
div
元素垂直堆叠，它们的
outline
属性设置为1px。
div
元素的
高度为117px

我希望在两个
div
元素相遇的地方，它们的轮廓是连续的。它这样做没有内容

当我将top=97px、height=20px的
absolute
定位输入放入顶部
div
时，该div的轮廓被向下推

这是显示这一点的。如果删除
输入
，您将看到顶部的
div
轮廓如何位于底部的
div
旁边

有两件事（至少）我不明白：

1） 在使用浏览器的开发工具（Firefox）检查这个框时，我发现top
div
实际上仍然是117px高。轮廓应该围绕div绘制，但看起来不是。为什么?

2） 输入的顶部为97px，高度为20px。为什么这会影响大纲的位置？看起来大纲向下推了4倍。
我有两个答案给你：

1） 在使用浏览器的开发工具（Firefox）检查该框时，我发现顶部div实际上仍然是117px高。轮廓应该围绕div绘制，但看起来不是。为什么?

轮廓似乎是围绕着里面的所有东西画的。因此，如果一个元素在底部突出100px。大纲也将移动100像素。在这种情况下，输入元素突出8px。因此，大纲比您预期的长8像素

输入的顶部为97px，高度为20px。为什么这会影响大纲的位置？看起来轮廓向下推了4倍

你几乎是对的，97px+20px确实是117px的高度。但是您忘记了从输入元素计算8px。这来自3倍厚的边框+1倍厚的填充
 我有两个答案给你：

1） 在使用浏览器的开发工具（Firefox）检查该框时，我发现顶部div实际上仍然是117px高。轮廓应该围绕div绘制，但看起来不是。为什么?

轮廓似乎是围绕着里面的所有东西画的。因此，如果一个元素在底部突出100px。大纲也将移动100像素。在这种情况下，输入元素突出8px。因此，大纲比您预期的长8像素

输入的顶部为97px，高度为20px。为什么这会影响大纲的位置？看起来轮廓向下推了4倍

你几乎是对的，97px+20px确实是117px的高度。但是您忘记了从输入元素计算8px。这来自3倍厚的边框+1倍厚的填充
 这是因为它们依赖于实现。不仅仅是尺寸：

轮廓可能是非矩形的

从

本规范未规定管道的准确位置或形状
轮廓，但通常直接在边框框外绘制

Firefox历来都有在各种情况下使大纲更大的倾向，例如：





前者已修复，后者似乎与您的问题相同。
这是因为它们依赖于实现。不仅仅是尺寸：

轮廓可能是非矩形的

从

本规范未规定管道的准确位置或形状
轮廓，但通常直接在边框框外绘制

Firefox历来都有在各种情况下使大纲更大的倾向，例如：





前者已修复，后者似乎与您的问题相同。
我现在只能在基于Chrome的浏览器中进行测试，看不到您描述的效果。“输入”字段只是部分隐藏了下div的上部轮廓，如果您将其默认白色背景切换为透明，这一点会变得很明显。@CBroe-感谢您提到Chrome。我使用Chrome进行了测试，它没有表现出与Firefox相同的行为——这告诉我，填充、边距和边框的默认值必须不同。这就解释了为什么在默认情况下显式设置会在Firefox中修复它。我已经验证了它的总边框为1.5px，总填充为3px。我现在只能在基于Chrome的浏览器中进行测试，看不到您描述的效果。“输入”字段只是部分隐藏了下div的上部轮廓，如果您将其默认白色背景切换为透明，这一点会变得很明显。@CBroe-感谢您提到Chrome。我使用Chrome进行了测试，它没有表现出与Firefox相同的行为——这告诉我，填充、边距和边框的默认值必须不同。这就解释了为什么在默认情况下显式设置会在Firefox中修复它。我已经验证这是一个总边界为1.5px，总填充为3px。谢谢你的回答。我已经验证了Firefox在输入上设置了默认的填充和边框，导致了问题。你可以看到我更新的问题的细节。谢谢你的回答。我已经验证了Firefox在输入上设置了默认的填充和边框，导致了问题。你可以看到我更新的问题的细节。你是正确的-大纲正在扩大