现象说明

最近在项目发布的时候遇到了一个奇怪的问题，在项目使用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. jmeter的使用---web测试

    jmeter的使用---web测试 url:http://127.0.0.1:1080/WebTours/ 1.通过badboy录制脚本 1.1输入url点击右侧的跳转按钮,随后右侧显示url界面 1 ...

  2. Hadoop：Rack Awareness

    副本的放置对HDFS可靠性和性能至关重要. 优化副本放置HDFS有别于其他大多数分布式文件系统. 这是一个功能,需要大量的调优和经验. 基于机架感知(rack awareness)的副本放置策略的目的 ...

  3. Caused by: java.net.SocketException: Broken pipe

    异常信息 时间:2017-03-24 17:22:16,719 - 级别:[ WARN] - 消息: [other] The web application [ROOT] appears to hav ...

  4. springboot整合mq接收消息队列

    继上篇springboot整合mq发送消息队列 本篇主要在上篇基础上进行activiemq消息队列的接收springboot整合mq发送消息队列 第一步:新建marven项目,配置pom文件 < ...

  5. python爬虫小结1

    先看正则化,正则化就是描述命令和字符切分.查找.筛选等功能的方便方式. http://www.cnblogs.com/fnng/archive/2013/05/20/3089816.html 一个游戏 ...

  6. 【java设计模式】代理模式

    计算类中方法运行时间的几种方案: Client: package com.tn.proxy; public class Client { public static void main(String[ ...

  7. 【批处理】shift用法举例

    @echo off set sum=0 call :sub sum 1 2 3 4 echo sum=%sum% pause :sub set /a %1=%1+%2 shift /2 if not ...

  8. web调用客户端程序

    背景 最近做一个集成需求,我们是B/S架构的,对方是C/S架构的,对方直接扔过来一个EXE连OCX都没有,让我们调用,也就是说,我们需要通过js程序去调用他们的客户端程序并传入多个参数,当时内心是崩溃 ...

  9. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  10. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...