CSS特异性问题（？）

Question

我是一个完整的CSS新手 - 我的背景是后端开发。所以请提前原谅无知。

我试图更多地了解CSS的应用程序（或实际用途）。

给出以下CSS：

.input-size {
    height: 25px;
    width: 250px;
}

我试图弄清楚为什么WordPress页面中的以下HTML行会产生奇怪的结果：

<input type="text" placeholder="Search" class="input-size">

我认为这个问题与特异性有关，但我不确定如何更加重视上述风格。

以下图片是我的期望：

注意元素底部和下面画布之间的间距。

但是，当我将样式应用于文本框时，我得到以下内容：

底部似乎有大约25像素的填充，但在上面发布的样式中没有指定。

任何有关前进的建议都将受到赞赏。不幸的是，我不确定如何着手解决可能导致问题的原因。

谢谢！

Answer 1

你所拥有的是正确的，但你没有在新课程中定义填充。最有可能发生的是为input定义填充，它只是从默认样式继承属性。由于您已对其进行了检查 - 跟踪保证金规则。

Answer 2

在CSS中，尝试指定

padding : 0;

所以它会是：

.input-size {
    height: 25px;
    width: 250px;
    padding:0;
}