今天在做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. 《转载》跟我学SpringMVC

    在线版目录 第一章 Web MVC简介 第二章 Spring MVC入门 第三章 DispatcherServlet详解 第四章 Controller接口控制器详解(1) 第四章 Controller ...

  2. Asp.Net 数据库连接字符串

    <configuration> <connectionStrings> <add name="DefaultConnection" providerN ...

  3. WPF剪切板问题-OpenClipboard HRESULT:0x800401D0 (CLIPBRD_E_CANT_OPEN))

    WPF剪切板问题-OpenClipboard HRESULT:0x800401D0 (CLIPBRD_E_CANT_OPEN))       最近碰到一个问题,需要弄个小工具来解决.刚好接触到WPF, ...

  4. appium 自动化测试之知乎Android客户端

    appium是一个开源框架,相对来说还不算很稳定.转载请注明出处!!!! 前些日子,配置好了appium测试环境,至于环境怎么搭建,参考:http://www.cnblogs.com/tobecraz ...

  5. 如何正确的做WEB端的压力测试

    1.对要测试的系统进行分析,明确需要对哪一块做压力测试.比如:淘宝网站双十一期间,秒杀跟支付,此模式用户操作中占比比较大 再比如:游戏,登录--开始战斗--结束战斗这种混合模式在用户操作中占比较大 那 ...

  6. jquery mobile

    页面:data-role="page"  header.content.fooder 过渡:data-transition ="slide"  反向过渡:dat ...

  7. 五种方式让你在java中读取properties文件内容不再是难题

    一.背景 最近,在项目开发的过程中,遇到需要在properties文件中定义一些自定义的变量,以供java程序动态的读取,修改变量,不再需要修改代码的问题.就借此机会把Spring+SpringMVC ...

  8. adb 的使用

    打出log:adb logcat -s fliterName     ps:(fliterName就是你的tag)

  9. 阿里云CentOS7系列三 -- 配置防火墙

    前面讲到了安装JDK以及Tomcat.但是大家会发现,当我们访问 http:// XXX.XXX.XXX.XXX:8080/80 时候,tomcat 猫并没有出现.原因就是没有设置防火墙. 再次介绍下 ...

  10. Java面试常见知识点总结(二)

    11.构造方法(构造器): 构造方法是一种特殊的方法,具有以下特点.    (1) 构造方法的方法名必须与类名相同.    (2) 构造方法没有返回类型,也不能定义为void,在方法名前面不声明方法类 ...