CSS input、button由于之前元素font-size变化，上边距变化的问题
如下html：（省略html标签和head部分）
<body>
<div id="searchContainer">
<span id="logo">logo</span>
<input id="searchBox" type="text" placeholder="请输入搜索关键词"></input>
<button id="searchNow">Go</button>
</div>
</body>如下CSS：
<style>
searchContainer{
height:40px;
background-color: #2a426e;
}
searchContainer span{
color:white;
font-weight: bold;
font-size: 22px;
line-height: 40px;
height: 40px;
margin:0 15px;
}
searchBox{
height:20px;
width:180px;
border: 1px solid #eee;
padding: 1px 2px;
margin:8px 0px;
}
searchNow{
height:24px;
width:50px;
border: 1px solid #eee;
margin:3px 0;
}
</style>效果：输入框和按钮距离父元素上边距距离明显大于下边距，而且调上边距还没用
展开
收起
1
条回答
写回答
写回答
-
IT从业内联元素默认对其是baseline，你改变字体大小后，整体行框的baseline变了，所以对不齐
你试试给几个行内元素 vertical-align:middle 试试
2019-07-17 19:34:50赞同 展开评论 打赏
问答分类：
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
