在 Chrome/Firefox 中删除文本输入中的顶部和底部填充答案

【问题标题】：Remove top and bottom padding in text input in Chrome/Firefox在 Chrome/Firefox 中删除文本输入中的顶部和底部填充
【发布时间】：2012-05-13 06:09:19
【问题描述】：

我正在尝试使输入看起来像纯文本。目的是绘制一个跨度，当用户单击该跨度时，它会隐藏并显示一个看起来像纯文本但用户可以编辑的输入。

在 Chrome 和 Firefox 中，我无法摆脱顶部和底部填充，即使我将填充和边距 CSS 属性设置为 0。

我的 CSS 如下所示：

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

看到字体大小设置为 20px。 Chrome 和 Firefox 添加了 4px padding-top 和 padding-bottom，这样输入的高度是 28px，而不是预期的 20px。

【问题讨论】：

你能提供一个小提琴或现场演示吗？
感谢 Jrod，它实际上帮助我发现了问题。创建 jsfiddle 演示我注意到从头开始创建样式时没有这样的问题。我的在 CSS 中修改了 line-height，这就是它与高度不匹配的原因。谢谢！
它可能是你的占位符。使用::placeholder 选择它并使用相对定位将其“稍微”降低（例如，top: 0.1em;）。

标签： html css forms firefox google-chrome

【解决方案1】：

您还需要将输入元素的line-height 重置为20px。默认情况下，某些浏览器将 4px（2 上 + 2 下）添加到输入元素的行高。

【讨论】：

【解决方案2】：

它可能是你的字体。尝试直接设置输入的 CSS 高度或尝试调整 line-height。

【讨论】：

【解决方案3】：

正如 Diodeus 建议的那样，只需为您的输入添加高度。

input.myInput {
    font-family: "segoe ui";
    font-size: 20px;
    height: 20px;
    padding: 0px;
    margin: 0px;
    outline: none;
    border: 0px;
    vertical-align: baseline;
}

行高不起作用

【讨论】：