样式 INPUT["Text"] 与 DIV - 输入稍大

Question

我正在尝试设置输入标签和 DIV 标签的样式。 DIV 必须在输入下方，并且它们需要具有相同的宽度。但是，无论我做什么 - DIV 都比 INPUT 小一个像素。

这不应该发生，特别是如果（在这个例子中）两个对象共享同一个 CSS class。我知道如何编码 CSS。我只是不知道是什么导致输入框稍微大一点。

编辑：我不能简单地偏移一个像素。该设计使用 VW 单位，这是一个 "responsive" CSS3 测量单位。 1VW = 视口宽度的 1%。

<div style="width: 100%; position: relative">
    <input type="text" class="MyStyle" />
    <div class="MyStyle">Foo</div>
</div>

.MyStyle
{
    height: 6.09375vw;
    line-height: 6.09375vw;
    font-size: 3.05vw;
    padding-left: 2.013vw;
    width: 80vw;
    border: .4vw solid red;
    border-top-left-radius: .3vw;
    border-top-right-radius: .3vw;
    clear: both;
}

Answer 1

您忘记考虑 input 元素上的默认 padding-top/padding-bottom。

在Chrome中，元素的默认padding-top/padding-bottom为1px。

Updated Example - 现在两个元素具有相同的高度。

.MyStyle {
    padding-top: 0;
    padding-bottom: 0;
    height: 6.09375vw;
    line-height: 6.09375vw;
    font-size: 3.05vw;
    padding-left: 2.013vw;
    width: 80vw;
    border: .4vw solid red;
    border-top-left-radius: .3vw;
    border-top-right-radius: .3vw;
    clear: both;
}

您也可以使用 shorthand - padding: 0 0 0 2.013vw。 (example)

样式 INPUT["Text"] 与 DIV - 输入稍大

Styling INPUT["Text"] vs DIV - Input is slightly Bigger

html

css

input