码迷,mamicode.com
首页 > Web开发 > 详细

css: 解决inline-block缝隙

时间:2020-06-14 20:42:55      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:换行   ons   pre   bsp   连接   html注释   导致   换行符   span   

html:

<div class="consult-tab">
   <a href="">咨询</a>
   <a href="">企业咨询</a>
   <a href="">咨询</a>
   <a href="">咨询</a>
   <a href="">咨询</a>
</div>

css:

.consult-tab {
        position: relative;
        font-size: 0;
        margin-top: 20px;
        border-bottom: 2px solid #1da838;
    }

.consult-tab a {
        display: inline-block;
        font-size: 14px;
        border: 1px solid #1da838;
        border-right: 0;
        border-bottom: 0;
    }

虽然四个块状子元素排在了一行,但是子元素之间却留有空隙!

空隙产生原因:HTML中的换行符、空格符、制表符等空白符,字体大小不为0的情况下,空白符占据一定宽度,使用inline-block会产生元素间的空隙。

解决方法 :
1. 父元素的font-size设置为0,子元素的font-size设置为实际大小;
2. 子元素设置浮动;
3. 把所有的子元素写在一行;
4. 有时候子元素内容较长,所有子元素写在一行导致代码的可读性很差,这时候采用下面的写法(用HTML注释符把子元素连接起来)

 

css: 解决inline-block缝隙

标签:换行   ons   pre   bsp   连接   html注释   导致   换行符   span   

原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/13126635.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!