css - 为何两个input的高度不一样？

问题描述

问 题

    <div id="search">
        <input class="left" type="text" />
        <input class="search_btn" type="submit" value="搜索" />
    </div>
    
*{
  margin:0px;
  padding:0px;
}

#search input.left{
    border:2px solid red;
    height:30px;
    width:420px;
}

#search input.search_btn{
    background:red;
    width:70px;
    height:30px; 
    border:2px solid red;
}

为何左侧的高度要高一些？此时，右侧的上边线比左侧短一点？

现在修改一下css
    *{
  margin:0px;
  padding:0px;
}

#search input.left{
    border:2px solid red;
    height:30px;
    width:420px;
}

#search input.search_btn{
    background:red;
    width:70px;
    height:30px;
    line-height:30px;
    border:2px solid red;
}

左右两侧的上边线一样高了，但是，右侧的下边线又短了一点。

请解释一下？

解决方案

两个input的box-sizing属性是不应的，submit的默认是border-box，而text是content-box
统一就好了，然后垂直居中调一下，就行了。

input{
  box-sizing:border-box;
  vertical-align:middle;
}

这篇关于css - 为何两个input的高度不一样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！