css中，input和button设置了同样的height，实际高度不一样

如上图，给input和button设置了同样的height，实际高度却不一样
此时需要给input设置box-sizing: border-box;

<div class="search-container" >
  <input type="text">
  <button>搜索</button>
</div>

input {
	position: absolute; 
	top:0; 
	left: 0; 
	height: 32px;
	width:100%; 
    border: 1px solid #eeeeee;
    border-radius: 16px;
    background: #f5f6f7;
    padding: 0 10px;
    box-sizing: border-box;
}
button {
	position: absolute; 
	top:0; 
	right:0; 
    height:32px;
    background-color: #fc5531;
    border-radius: 0 16px 16px 0;
    border: none;
    width: 88px;
    color: white;
}

设置后效果如下图

同样，在给search-container设置margin-top时，使用计算属性，需要注意规范-号的前后要加空格

此时未生效


此时生效成功