display-inline-block是让元素在一行显示，但是这些元素在html里面是上下行排列的，所以中间有换行符，于是并排显示就有了换行符带来的空隙。那么如何解决呢？

方案一：将html标签要display:inline-block 的元素写在一行。缺点：代码可读性差。

方案二：给父元素设置font-size:0,缺点是子元素如果里面有文字，文字会消失不见，所以又要给子元素设置font-size:0,增加了代码量。

方案三：给元素设置float:left,缺点高度塌陷，要清楚浮动。

方案四：设置子元素的margin-left为负值，但是元素之间的间隙大小是根据上下文的字体大小确定的，而每个浏览器的换行空隙大小不同，如果font-szie：16px,chrome空隙为8px,火狐空隙为4px.所以这个方法不通用。

方案五：设置父元素 display:table;word-spacing:-1em;目前这个方法可以完美解决，且兼容其他浏览器。

display:inline-block间隙产生的原因以及解决方案的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. PPI协议详解 ppi通讯协议 ppi通信协议 vb与ppi协议通讯

    转自:http://blog.csdn.net/vbvcde/article/details/7660497 我们提供 PPI协议的官方文档,协议更新时间为2005年,下面是我们根据文档解析的PPI读 ...

  2. java 获取 HttpServletRequest 值 demo

    private void getHttpServletRequestInfo(HttpServletRequest request){ try { StringBuilder stringBuilde ...

  3. 如何将ajax请求同步化

    (function ($) { var a = ['test1', 'test2', 'test3', 'test4']; recursive(3, 'test').done(function (re ...

  4. 玩转 React 服务器端渲染

    React 提供了两个方法 renderToString 和 renderToStaticMarkup 用来将组件(Virtual DOM)输出成 HTML 字符串,这是 React 服务器端渲染的基 ...

  5. Centos7 使用 supervisor 管理进程

    一.安装 //直接使用pip安装(pip的安装 http://www.cnblogs.com/yxhblogs/p/8971251.html) pip install supervisor 二.配置 ...

  6. WSAData是个什么结构体用什么用

    WSAData机构体如下 功能是:存放windows socket初始化信息.struct WSAData { WORD wVersion; WORD wHighVersion; char szDes ...

  7. 2019年第十届蓝桥杯国赛总结（JavaA组）

    JavaA组国二,可以报销了~ JA死亡之组可不是盖的,rank12的排名还是拿不到国一啊(只有五个.. 出成绩的一刻波澜不惊,毕竟去年有国一了不慌哈哈哈 不过对我来说这个结果还算意料之外吧,毕竟大三 ...

  8. [小工具] C#多线程|匿名委托传参数|测试网站压力--升级版

    上次文章链接:http://www.sufeinet.com/thread-11-1-1.html写这些并不是不会用测试工具,也并不是无视测试工具,而是做为一个程序员希望用自己写的东西来完成一些功能, ...

  9. 数据库路由中间件MyCat - 使用篇（6）

    此文已由作者张镐薪授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 配置MyCat 4. 配置schema.xml schema.xml里面管理着MyCat的逻辑库.表,每张表 ...

  10. css 实现垂直水平居中常用方法

    html <div class="outer"> <div class="inner"></div> </div> ...