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

Question

我正在尝试使输入看起来像纯文本.目标是绘制跨度,当用户单击其隐藏的跨度并显示看似纯文本但可由用户编辑的输入时.

在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填充顶部和填充底部,因此输入高28px,而不是预期的20px.

Answer 1

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