html - 为什么我的元素比指定高度高 4px？

Question

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

.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;
}

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

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

标签： htmlcss

Answer 1

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

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

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

放入box-sizing: border-boxsearchId。