今天在做H5的水平滑动卡片时用到了display:inline-block;却发现处在同一水平线上的元素之间居然产生了缝隙，这很显然不是我想要的效果，所以我就换成了左浮动，这样缝隙的问题是解决了，但是需要设置父元素的宽度才能实现水平左右滚动，这样又增加了代码量，因为卡片的个数不固定，需要实时设置其父元素的宽度，就要用到js，所以代码量增加了，也不是最好的选择。看来最好的解决办法就是用到display:inline-block;了，于是缝隙的问题就出现了。代码如下：

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<title>document</title>

<style>

*{margin:0;padding:0;}

.box{overflow-x:auto;background:#fff;white-space:nowrap;}

.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}

</style>

</head>

<body>

<div class="box">

    <span>111</span>

    <span>111</span>

    <span>111</span>

    <span>111</span>

</div>

</body>

</html>

效果如下：

这个缝隙很明显存在，据说这种表现是符合规范的应该有的表现，是换行造成的空白符导致的。但这效果很显然不是我们想要的，我们想要的缝隙是我们根据自己的实际需求而设置的边距。那么该如何消除产生的这个缝隙呢？办法有三：

方法一：元素之间不换行，代码如下：

<div class="box">

    <span>111</span><span>111</span><span>111</span><span>111</span>

</div>

效果如下：

方法二：给其父元素设置font-size:0;给其自身设置实际需要的字号大小。不好的地方就是有些浏览器有设置最小字体，像chrome和opera，但是现在的chrome好像没有这个设置了，代码如下：

css:

.box{overflow-x:auto;background:#fff;white-space:nowrap;font-size:0;}

.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;font-size:14px;}

html:

<div class="box">

    <span>111</span>

    <span>111</span>

    <span>111</span>

    <span>111</span>

</div>

效果如下：

方法三：负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。

以上三种方法，前两种是比较好的解决办法，第三种方法不推荐使用。网上还有其他的解决办法，但我认为还是前两种比较好。

PS：

结合广大前端大神的评论建议来看，也可以给其父元素设置display:flex来消除缝隙，且代码量少了，但是用在我的水平滑动卡片的效果中导致所有的元素都处在了可视窗口中，就不能实现水平左右滑动了。

css解决display:inline-block;产生的缝隙（间隙）的更多相关文章

  1. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

  2. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  3. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  4. 解决div里插入img下边缝隙问题

    <html>   <head>   <title> new document </title>   <meta name="author ...

  5. css 浅析display属性

    继续开始我的css之旅吧.今天我们来说什么啊.构思了两天还是没有什么思路,但是学习的步伐我们不能停止下来.还是按照之前的计划来讲讲display,在讲这个之前我们还是按照老规矩来扯扯蛋,步子不能够迈大 ...

  6. CSS的display属性

    网页设计中最常用的标签p.div.h1-h6(默认为块级元素),span(默认为内联元素) 内联,内嵌,行内属性标签: 1.默认同行可以继续跟同类型标签: 2.内容撑开宽度 3.不支持宽高 4.不支持 ...

  7. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  8. css 关于"浮动边距加倍"及其解决方法-------解决方案是在这个div里面加上display:inline;

    写div代码的时候,经常发现明明宽度算得很准确,但是莫明其妙的会和计划的布局不太一样- -|||开始以为自己代码写的有问题,拼命找bug也一无所获,最后可能会稍微修改样式来达到想要的效果,但终究也是外 ...

  9. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

随机推荐

  1. C# 中的委托和事件

    觉得这篇文章写的非常好,大神之作,由简入繁,对我这种初学者来说帮忙很大,特此留存下. 摘自:http://tracefact.net/CSharp-Programming/Delegates-and- ...

  2. js识别当前用户设备的几个方法

    公司要做一个APP下载页面,里面需要判断是安卓还是苹果访问本页面,最开始想偷懒直接在给IOSAPP返回IOSAPP商店地址,然后Android直接进行访问.但想着毕竟做两个页面不利于后期维护和修改,打 ...

  3. log4net 添加日志

    1.  在config里配置一下 <configSections>    <section name="log4net" type="System.Co ...

  4. Windows Server 2008 R2 IIS7.5 部署 MVC HTTP 404.0 Not Found 错误

    如图 在Windows Server 2008 R2 IIS7.5 部署 MVC HTTP 404.0 Not Found 错误,在Win7环境下测试正常,在百度中查找相关解决方法,如修改配置文件等, ...

  5. STM32F412应用开发笔记之二：基本GPIO控制

    NUCLEO-F412ZG板子上的元器件并没有完全焊接,除去ST-LINK部分和电源部分后,还有用一个USB主机接口,三个LED灯和两个按钮,不过很多功能引脚都已经引到了插针.查看原理图可发现,由原理 ...

  6. iOS系统验证关闭

    在浏览器上查看iOS系统与否方法:1.打开浏览器2.在地址栏中输入 ipsw.me3.在打开的网页中选择 Select a device 选择你要查看的设备型号:4.选择好设备之后点击select i ...

  7. 手把手教你玩转nginx负载均衡（一）----使用vitualBox创建虚拟机

    引言 作为一个web程序员,有时候需要想尽办法来利用有限的资源来产生最大程度的负载,除了提高硬件配置,增加带宽之外,CDN加速,DNS加速,缓存,还可以利用反向代理.但是要说反向代理,就不的不说ngi ...

  8. 如何清除Xcode8打印的系统日志

    Xcode升级成8之后,就会发现控制台打印的日志莫名其妙的变得超级多,最关键的是很多都是没有用的东西,而有些有用的东西却淹没在那无任何卵用的里面,在这我就说一下如何关掉这些没有用的日志. 1.直接快捷 ...

  9. 使用AFNetWorking上传图片

    AFHTTPSessionManager *manager   = [AFHTTPSessionManager manager]; NSString *string                  ...

  10. tp框架之分页与第三方类的应用

    1.先把分页类放在根目录下,比如放在某个模块下 2.在类里面写入命名空间,注意类名的格式(类名要与里面的方法名一致) 3.在需要的方法里面按照路径进行实例化,然后就可以使用了 方法: public f ...