为什么当输入字段的高度小于 15px 时，它们会分开？

Question

为什么我的输入字段在高度小于 15px 时会散开？我有 0px 的边距和填充。

高度为 30 像素的输入 ⬈

高度为 15 像素的输入 ⬈

高度为 10 像素的输入 ⬈

高度为 5 像素的输入 ⬈

<input type="text"></input><br/>
<input type="text"></input>

input {
    height: 10px;
    padding: 0px;
    margin: 0px;
}

Answer 1

因为它们存在于由 line-height 属性.

控制的文本行中

如果您在父 块级别 元素中设置 line-height ，那么它们将按照您想要的方式显示。

此外，<input /> 元素是自闭合的，虽然使用 <input></input> 语法在 XML 中有效（因此在 XHTML 中无效） HTML 和一些（较旧的）浏览器和其他 HTML DOM 库可能会阻塞它，所以请将它们更改为 <input /> 样式。

Answer 2

你可以看看更新后的fiddle：http://jsfiddle.net/dqt1o01o/1/

我通过删除 br tag 并将输入设置为显示块类型来实现此目的。这里是完整的 css:

input {
    height: 10px;
    padding: 0px;
    margin: 0px;
    display:block;
}

Why do input fields spread apart when their height is smaller than 15px?