Question

我在标题中输入了一个输入，为了测试目的，我希望输入和标题一样高，但是当我将输入高度设置为与标题相同的高度时，输入更高...所以我在输入中添加了margin: 0px和padding: 0px ...但是，它仍然高于高度。当我将输入的高度设置为46px时，它等于标题，即高度为50px。

＆＃13;

.container{
    width: 96%;
    margin: 0 auto;
}

#header{
    height: 50px;
    background-color: #05568D;
    border-radius: 10px 10px 0px 0px;
    position: relative;
}

#searchId{
    padding: 0px;
    margin: 0px;
    height: 46px;
}

＆＃13;

<div id="header" class="container">
  <input type="text" placeholder="Search.." name="search" id="searchId">
</div>

＆＃13;

这是什么原因？我该如何纠正呢。

Answer 1

这是因为box-sizing属性。默认box-sizing值为content-box。

content-box为您提供默认的CSS框大小调整行为。如果将元素的宽度设置为100像素，则元素的内容框将为100像素宽，并且任何边框或填充的宽度将添加到最终渲染。

所以当你在输入框中输入46px时，它的高度变为50px（内容：46px +边框：4px）。

将box-sizing: border-box放入searchId。

为什么我的<input />元素比它指定的高度高4px？

1 个答案: