Html 具有唯一子元素的父元素具有高度，即使唯一子元素的所有填充、边距、高度和宽度都设置为零

我遇到了一个问题：具有独生子元素的父元素具有高度，即使独生子元素的所有填充、边距、边框、轮廓、高度和宽度都设置为零，但当我将“显示”设置为“无”时，它会突然起作用

为什么会这样？我忘了什么？如何在不改变父元素高度的情况下，达到parrent元素高度为零的点

这是我制作的一个简短片段

*{框大小：边框框；}
div{
边框：3倍红色实心；
保证金：0；
填充：0；
}
输入{
显示：内联块；
身高：0；
宽度：0；
填充：0；
保证金：0；
大纲：无；
边界：无；
}

---

将输入设置为

display:block

将divs

行高设置为
0


*{
框大小：边框框；
}
div{
边框：3倍红色实心；
保证金：0；
填充：0；
线高：0；
}
输入{
显示：内联块；
身高：0；
宽度：0；
填充：0；
保证金：0；
大纲：无；
边界：无；
}
这里您面临的是
内联块的行为及其对齐方式。因此，要解决此问题，您需要将
行高：0
设置为所建议的div或
字体大小：0
，并将输入的对齐方式更改为默认的基线


*{框大小：边框框；}
div{
边框：3倍红色实心；
保证金：0；
填充：0；
字号：0；
/*或
线高：0*/
}
输入{
/*显示：内联块；不需要，因为它是默认值*/
身高：0；
宽度：0；
填充：0；
保证金：0；
大纲：无；
边界：无；
垂直对齐：顶部；/*添加此*/
}
我已经编辑了这个问题：我需要将输入显示为inline-block。如果您仔细观察，或者使用开发工具，您可以看到div仍然是6.5px高-有没有办法将其动画化？您好，谢谢您的回答！当我替换
行高：0时，它起作用至
字体大小：0<代码>垂直对齐：顶部不是必需的。我将这个答案标记为解决方案。