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

Question

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

在 Chrome 和 Firefox 中，即使我将 padding 和 margin 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。

Answer 1

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