多种去除inline-block元素之间的间隙解决方法详解

导航一般使用a标签,a标签的默认属性为inline。在需要设置其width、height时,经常为导航的a标签设置inline-block属性,满足导航元素样式为一行排列。其实,在每个导航a标签还存在一个小小的间隙,在没有设置元素margin的情况下,设置一下a标签背景颜色,来个反差即可看到:
先来个html结构:

    <body>
        <div class="daohang">
            <ul>
            <li><a href="">首页a>li>
            <li><a href="">登陆a>li>
            <li><a href="">资源a>li>
            <li><a href="">社区a>li>
            <li><a href="">帮助a>li>
            ul>
        div>
    body>

多种去除inline-block元素之间的间隙解决方法详解_第1张图片

箭头所指之处即为inline-block之间的间隙。

为什么会出现这个间隙呢?原因是这样的,html的闭合标签其实是一个换行符,会产生一个空白符,所以在元素之间会产生一个间隙。解决的方式有一下几种:

1、删除换行符,也就是li元素不换行

<ul>
            <li><a href="">首页a>li><li><a href="">登陆a>li><li><a href="">资源a>li><li><a href="">社区a>li><li><a href="">帮助a>li>
            ul>

刷新页面看一下导航:
多种去除inline-block元素之间的间隙解决方法详解_第2张图片

可以看到间隙消失了。
缺陷:会造成html页面不美观的问题。

2、将li的闭合标签写到下一个li起始标签之前:

<body>
        <div class="daohang">
            <ul>
            <li><a href="">首页a>
            li><li><a href="">登陆a>
            li><li><a href="">资源a>
            li><li><a href="">社区a>
            li><li><a href="">帮助a>li>
            ul>
        div>
    body>

原理同方法1。
缺陷:造成html结构混乱。

3、li标签不闭合

<body>
        <div class="daohang">
            <ul>
            <li><a href="">首页a>
            <li><a href="">登陆a>
            <li><a href="">资源a>
            <li><a href="">社区a>
            <li><a href="">帮助a>
            ul>
        div>
    body>

页面效果:
多种去除inline-block元素之间的间隙解决方法详解_第3张图片

html标签会自动补齐未闭合的标签,同时也不会出现换行符。

4、把父节点ul的font-size设置为0,再单独设置li的font-size.

多种去除inline-block元素之间的间隙解决方法详解_第4张图片

刷新页面:
多种去除inline-block元素之间的间隙解决方法详解_第5张图片

间隙也没有了
缺陷:造成元素上移。
原因是,ul默认有一个margin值,将ul的font-size设置为0时同时也删除了这个margin,所以元素上移。

不做该方案,将原始的代码ul的margin设置为0,就看到元素上移了:
多种去除inline-block元素之间的间隙解决方法详解_第6张图片

5.设置负边距
为元素之间设置负的margin值,消除间隙
多种去除inline-block元素之间的间隙解决方法详解_第7张图片

同样间隙也没有了
多种去除inline-block元素之间的间隙解决方法详解_第8张图片

缺陷:不是所有的浏览器下都是3px的间隙,会出现浏览器不兼容的情况。

6、最后一种,在css4的草案中,已经有了针对的属性:white-space-collapsing。等css4正式发布就可以很好的解决这个歌问题了。

你可能感兴趣的:(小经验)