今天在做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. JQ倒计时天时分秒

    <div id="times_wrap" class="time_num"> 距离现在时间: <div class="time_w& ...

  2. js调用php和php调用js的方法举例

    js调用php和php调用js的方法举例1 JS方式调用PHP文件并取得php中的值 举一个简单的例子来说明: 如在页面a.html中用下面这句调用: <script type="te ...

  3. swift 3.0 协议笔记

    协议能够要求遵循者必须含有一些特定名称和类型的实例属性(instance property)或类属性(type property),也能够要求属性的(设置权限)settable 和(访问权限)gett ...

  4. 第三天--html列表

    <!Doctype html><html>    <head>        <meta charset="utf-8">      ...

  5. 自定义 URL Scheme 完全指南

    本文由 Migrant 翻译自 The Complete Tutorial on iOS/iPhone Custom URL Schemes,转载请注明出处. 注意: 自从自定义 URL 的引入,本文 ...

  6. linux I/O复用

    转载自:哈维.dpkirin url:http://blog.csdn.NET/zhang_shuai_2011/article/details/7675797 http://blog.csdn.Ne ...

  7. 如何在Eclipse下查看JDK源代码

    在Eclipse中查看JDK类库的源代码!!! 设置: 1.点 "window"-> "Preferences" -> "Java&quo ...

  8. APP开发 Token生成 验证

    准备好协议(HTTP).数据表示方法(JSON).请求数据的方法(REST) 选择一个合适的框架 接口特点汇总: 1.因为是非开放性的,所以所有的接口都是封闭的,只对公司内部的产品有效: 2.因为是非 ...

  9. Hadoop单机模式安装-(1)安装设置虚拟环境

    网络上关于如何单机模式安装Hadoop的文章很多,按照其步骤走下来多数都失败,按照其操作弯路走过了不少但终究还是把问题都解决了,所以顺便自己详细记录下完整的安装过程. 此篇主要介绍如何在Windows ...

  10. BI项目记笔记索引

    这个笔记系列主要记录了在BI项目中,如何搭建环境进行源代码管理以及文档管理. 用到的产品包括: TFS Express Sharepoint Visual Studio SQL Server   配置 ...