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

Question

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

高度为 30 像素的输入⬈

---

高度为 15 像素的输入⬈

---

高度为 10 像素的输入⬈

---

高度为 5 像素的输入⬈

JSFiddle

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

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

Answer 1

因为它们存在于由 line-height 控制的文本行中属性(property)。

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

此外，<input />元素是自关闭的，同时使用 <input></input>语法在 XML 中有效(因此在 XHTML 中有效)在 HTML 中无效，某些(较旧的)浏览器和其他 HTML DOM 库可能会阻塞它，因此请将它们更改为 <input /> -风格。