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. exosip 和 pjsip 简介

     oSIP oSIP的开发开始于2000年7月,第一个版本在2001年5月发 布,到现在已经发展到3.x了.它采用ANSI C编写,而且结 构简单小巧,所以速度特别快,它并不提供高层的SIP会话 控制 ...

  2. Jmeter提取响应数据的结果保存到本地的一个文件

    原文地址: https://www.cnblogs.com/whitewasher/p/9504728.html 当做性能压测时,可能会需要把响应数据的一些字段统计出来.这里简单介绍一下. 1.首先把 ...

  3. Springboot学习七 spring的一些注解

    一 事务控制 @Service public class CityServiceImpl implements CityService { @Autowired private CityMapper ...

  4. 三 lambda表达式有什么用

    (转载: https://mp.weixin.qq.com/s/-PHOc6p-qKJBktle28AUgA) 一: 直接把代码块赋值给变量 我们知道,对于一个Java变量,我们可以赋给其一个“值”. ...

  5. ceph安装对象网关

    1.概述 安装3个网关节点分别是:controller-03.controller-04和controller-05,使用ceph gw自带的Civetweb提供服务,前端使用nginx作为前端代理. ...

  6. Repeater 和 GridView 添加序列号

    <tr><asp:Repeater ID="rptOfBrowerInfo" runat="server" >    <Heade ...

  7. css使图片变成黑白效果

    -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale(%); -o-filter: graysc ...

  8. Struts2&nbsp;+&nbsp;easyui的DataGrid&nbsp;分页

    jsp页面 js代码: $(function() { $('#ff').hide(); $('#tt').datagrid({ title : '信息显示', iconCls : 'icon-save ...

  9. Python3 编译中文字串报错解决方案

    问题: Python3.6.5 版本中,程序有中文,运行时出现以下error: SyntaxError: Non-UTF-8 code starting with '\xb2' in file XXX ...

  10. 我对微信小程序的一些认识

    一. 什么是微信小程序. 微信小程序是指微信公众平台小程序,小程序可以帮助开发者快速的开发小程序,小程序可以在微信内被便捷地获取和传播:是不需要下载和安装既可以使用的应用小程序,是和原有的三种微信公众 ...