CSS input、button由于之前元素font-size变化,上边距变化的问题 -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

CSS input、button由于之前元素font-size变化,上边距变化的问题

杨冬芳 2016-06-12 17:56:49 1570

如下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>

效果:输入框和按钮距离父元素上边距距离明显大于下边距,而且调上边距还没用
screenshot

前端开发
分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:34:50

    内联元素默认对其是baseline,你改变字体大小后,整体行框的baseline变了,所以对不齐

    你试试给几个行内元素 vertical-align:middle 试试

    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程