今天在做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. spring mvc 中文参数乱码

    最近做项目,springmvc的url中文参数乱码: 请求url: http://localhost:8080/supply/supply_list.htm?productName=测试&is ...

  2. Date、Calender类及日期和字符串转换

    Calendar是一个抽象类,抽象类java.util.Calendar 不可以通过new来获取一个实例,可以通过类方法getinstance()获取此类型的一个通用的对象 ①用法: Calendar ...

  3. MySQL延迟复制--percona-toolkit和MASTER TO MASTER_DELAY

    为了数据的安全,有的时候数据库需要延迟备份,这里说下两种延迟备份的方法. 一.借助工具. 实现环境: 192.168.189.143 (mysql主库) 192.168.189.144 (mysql备 ...

  4. vmware下centos7桥接模式无法上网

    前一段时间由于想给vm中的centos分配一个独立的IP,就将网络适配器的连接方式由NAT改为桥接,一切顺利. 今天再次开机,IP居然变成了192开头的局域网,并且ping不通外网,经过查找资料,解决 ...

  5. html内的空格占位

    写html的时候有时因为字数不够会根据字段长度添加多个空格,但是在html中添加空格是没有用的,所以使用空格的代替符号有:   不断行的空白(1个字符宽度)   半个空白(1个字符宽度)   一个空白 ...

  6. IBM CLI 和 ODBC

    Installing and Configuring DB2 Clients Running CLI/ODBC Programs The DB2 Call Level Interface (CLI) ...

  7. windows下ThinkPHP3.2.3使用memcache缓存

    准备 要使用memcache,首先要安装配置好memcache服务memcached: 下载http://downloads.northscale.com/memcached-win64-1.4.4- ...

  8. JS基础学习（一）

    首先感谢 http://www.w3school.com.cn/js/index.asp 学js真的很方便,&下面的内容其实是我自己做的一个备忘 第一节 大致了解 一 js基本介绍 1.轻量级 ...

  9. MYSQL数据库相关知识合集

    1  MYSQL取得某一范围随机数: 关键词:RAND() [产生0~1之间的随机数] mysql> SELECT RAND( ), RAND( ), RAND( ); +----------- ...

  10. opencv计算运行时间

    double Time = (double)cvGetTickCount();//  算法过程Time = (double)cvGetTickCount() - Time ; printf( &quo ...