今天在做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. Windows 网络通讯开发

    Windows 网络通讯开发 一.Windows网络开发API 由于C++标准库中没有网络库,所以进行网络开发的时候要调用系统API.Windows通讯开发API包括以下几个基本函数及成员类型: 1. ...

  2. python之I/O操作

    IO在计算机中指Input/Output,也就是输入和输出.由于程序和运行时数据是在内存中驻留,由CPU这个超快的计算核心来执行,涉及到数据交换的地方,通常是磁盘.网络等,就需要IO接口. 比如你打开 ...

  3. android include进来的组件 调用其子元素

    include标签包裹着一个可复用的布局: <include layout="@layout/footer_detail" android:id="@+id/foo ...

  4. Python-类的属性

    类的属性,可以称为成员变量 类的方法,可以称为成员函数   对象的创建 - 创建对象的过程称之为实例化:当一个对象被创建后,包含三个方面的特性:对象句柄.属性和方法. - 句柄用于区分不同的对象(实例 ...

  5. Python-匿名函数

    lambda 函数是一种快速定义单行的最小函数,可以用在任何需要函数的地方   常规版本: def fun(x,y) return x*y lambda版本: r = lambda x,y:x*y p ...

  6. ceshi

    % void CLASS cam_xyz_coeff (float rgb_cam[3][4], double cam_xyz[4][3]) % { % double cam_rgb[4][3], i ...

  7. linux简单命令

    查看服务器开启的进程信息[root@CentOSHT ~]# top 其中第一行的  Load average 参数是服务器负载的意思,

  8. T-SQL 基本语法

    --查询 select DB_ID('B2C') --检查数据库是否存在 if DB_ID('B2C') is not null --使用数据库 use B2C --单引号表示字符串,双引号则不是 U ...

  9. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  10. 如何使用android百度地图离线地图

    1.首先把离线地图放在android工程下的assets里面. 注意:建议离线地图下载通过百度地图APIDEMO去下载,因为到官网上下载的离线地图文件格式不一样,APIDEMO的格式是.dat,而官网 ...