Question

我编写这些代码并在chrome控制台中检查它，如图所示。两个额外的两个像素。

<input type="text" id="keyWords" class="search-ipt" placeholder="请输入订单号/借款人姓名">

.search-ipt {
    display: inline-block;
    height: 28px;
    width: 150px;
    border: none;
    outline: none;
}

input's attribute

Answer 1

input继承浏览器默认的padding值（检查元素，您可以看到该元素继承的所有样式）。因此，您必须向该属性添加一些值（或将其设置为0）以覆盖浏览器：

.search-input {
  display: inline-block;
  height: 28px;
  width: 150px;
  border: none;
  outline: none;
  padding: 0; /* or some other value */
}

JSFiddle

将来使用一些CSS重置，例如Mayer's，“重置”所有默认浏览器值。

Answer 2

从我身边的完美

＆＃13;

.search-ipt {
    display: inline-block;
    height: 28px;
    width: 150px;
    border:none  ;
    outline: none;
    padding:0;
  background:#ccc;  
}

＆＃13;

<input type="text" id="keyWords" class="search-ipt" placeholder="请输入订单号/借款人姓名">

＆＃13;

Answer 3

设置.search-ipt padding:0并检查您是否会获得150x28。

.search-ipt {
    display: inline-block;
    height: 28px;
    width: 150px;
    border: none;
    outline: none;
    padding:0;/*Add this*/
}

输入元素的高度不正确

3 个答案: