现象说明

最近在项目发布的时候遇到了一个奇怪的问题，在项目使用gulp打包压缩后发现之前一些行内元素间的空白消失了，导致页面中一些布局出现了问题

正常样式如下：

  

最开始出现这个问题的时候以为是gulp在压缩css，html出现了什么问题，一直在对比压缩前后对应节点的样式和结构，但却始终没有发现问题。

通关观察元素的盒模型，觉得这段空白实际上是不应该出现的，压缩后异常的样式反而是正常的。最后通过查阅资料最后发现原来inline-block元素

的自动留白造成的这一空隙的出现。

空白出现原因

其实产生这一空白的原因是我们在平时编码的时候这种行内元素之间往往会有一个换行符或空格，浏览器会识别并为我们的行内元素见插入一段空白。

代码对比如下：

压缩前html

<style>

    ul li {

        display: inline-block;

        background-color: aquamarine

    }

</style>

<body>

    <ul>

        <li>元素1</li>

        <li>元素2</li>

        <li>元素3</li>

        <li>元素4</li>

    </ul>

</body>

压缩后html示例

<style>

    ul li {

        display: inline-block;

        background-color: aquamarine

    }

</style>

<body><ul><li>元素1</li><li>元素2</li><li>元素3</li><li>元素4</li></ul></body>

出现这种情况不能算是bug，是一种良好布局规范的体现。但是并不是任何时候都需要这种留白，有时候这种浏览器默认的留白会对并清楚原理的开发人员

造成不必要的干扰。那有什么办法可以取消这一默认设置吗。

去除inline-block元素间间距

针对这一问题网上提出了很多的解决办法在这里我就不再复述，给出的每种办法都很巧妙，不得不佩服程序员的智慧。（点击查看）

项目压缩前和压缩后出现不同的布局显然是不可取的，所以后来的话通过改变gulp压缩配置的方式保留了元素间的换行符，尽可能的保持一致。

避免出现异常的布局问题。

inline-block元素间留白现象探究的更多相关文章

  1. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  2. 如何消除inline-block元素间间距问题（转）

    一.现象描述    真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type=" ...

  3. 去除inline-block元素间间距的N种方法

    这篇文章发布于 2012年04月24日,星期二,22:38,归类于 css相关. 阅读 147771 次, 今日 52 次 by zhangxinxu from http://www.zhangxin ...

  4. [转]去除inline-block元素间间距的N种方法

    来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com] 一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子 ...

  5. 去除inline-block元素间间距的N种方法<转>

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  6. 去除inline-block元素间间距的N种方法(转)

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  7. 去除inline-block元素间间距的N种方法-zhangxinxu

    张鑫旭原文:点这里进入原文 另外附上大漠老师的如何解决inline-block元素的空白间距地址!!! 去除inline-block元素间间距的N种方法: 一.现象描述 真正意义上的inline-bl ...

  8. 转载>>去除inline-block元素间间距的N种方法《重》

    一.现象描述 真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: <input /> <input type="su ...

  9. css中font-size为0的妙用（消除内联元素间的间隔）

    前言 <div> <input type="text"> <input type="button" value="提交& ...

随机推荐

  1. PHP中被忽略的性能优化利器：生成器

    如果是做Python或者其他语言的小伙伴,对于生成器应该不陌生.但很多PHP开发者或许都不知道生成器这个功能,可能是因为生成器是PHP 5.5.0才引入的功能,也可以是生成器作用不是很明显.但是,生成 ...

  2. 基于Gulp + Browserify构建es6环境下的自动化前端项目

    随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...

  3. IDEA+PHP+XDebug调试配置

    XDebug调试配置 临时需要调试服务器上的PHP web程序,因此安装xdebug,下面简单记录 安装xdebug 下载最新并解压 wget https://xdebug.org/files/xde ...

  4. immutable.js 更新数组（mergeDeepWith）

    使用情境: 技术栈为:react + redux + antd (reducer中处理数据使用了immutable.js). 问题:如下图,做一个搜索功能,form表单每改变一次,都会调用一个upda ...

  5. 刚 安装 Oracle时，登录会出现的问题， ora-28000: the account is locked

    来这个连接 就OK了: https://jingyan.baidu.com/article/48b37f8d1ec3fd1a6464883a.html 第一步: 进入cmd: 然后将下面的sql输入就 ...

  6. OC学习9——反射机制

    1.OC提供了3种编程方式与运行环境进行交互: 直接通过OC的源代码:这是最常见的方式,开发人员只是编写OC源代码,而运行环境负责在后台工作. 通过NSObject类中定义的方法进行动态编程:因为绝大 ...

  7. java.lang.StringBuilder和java.lang.StringBuffer (JDK1.8)

    这两个类都是继承自AbstractStringBuilder,AbstractStringBuilder有两个成员属性 char[] value; int count; 前者用于存储字符串,后者用于统 ...

  8. Git远程库版本回滚

    在git的一般使用中,如果发现错误的将不想staging的文件add进入index之后,想回退取消,这就叫做git代码库回滚: 指的是将代码库某分支退回到以前的某个commit id.可以使用命令:g ...

  9. [置顶] bootstrap自定义样式-bootstrap侧边导航栏的实现

    前言 bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单 ...

  10. HTML基本功之文档结构

    项目名 首页 命名为 index.html 样式文件夹 命名为 css  /*用来放样式文件*/ base.css  /*基本样式*/ index.css /*首页样式*/ global.css /* ...