发现问题

两个inline-block元素之间的间隔。如下图

期望

消除两个inline-block元素之间的间隔。

解决方法

1、父元素字体大小设置为0

间隔的形成是非元素标签形成的

/** 方案1，父元素字体大小设置为0 */

.wrap-font {

        font-size: 0;

        /*解决谷歌浏览下最小字体的限制*/

        -webkit-text-size-adjust: none;

}

.wrap-font div {

        font-size: 14px;

}

2、父元素转化为flex元素

/** 方案2，父元素转化为 flex */

.wrap-flex {

        display: flex;

}

推荐此方法

3、子元素转化为table-cell

/** 方案3，子元素转化为 table-cell */

.wrap-table>div {

        display: table-cell;

}

4、

/** 方案4，使用word-spacing */

.wrap-letter-spacing {

        word-spacing: -1em;

}

.wrap-letter-spacing>div {

        word-spacing: 0;

        /*消除父元素底部的间隔*/

        vertical-align: bottom;

}

同样的原理，也可以设置子元素的margin-left为负值来解决

完整代码

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8">

	<title>解决inline-block/inline-flex中间的间隔</title>

	<style>

		.wrap {

			width: 400px;

			background-color: #dcd9d0;

		}

		.wrap-item {

			display: inline-block;

			width: 100px;

			height: 100px;

		}

		/** 方案1，父元素字体大小设置为0 */

		.wrap-font {

			font-size: 0;

			/*解决谷歌浏览下最小字体的限制*/

			-webkit-text-size-adjust: none;

		}

		.wrap-font div {

			font-size: 14px;

		}

		/** 方案2，父元素转化为 flex */

		.wrap-flex {

			display: flex;

		}

		/** 方案3，子元素转化为 table-cell */

		.wrap-table>div {

			display: table-cell;

		}

		/** 方案4，使用word-spacing */

		.wrap-letter-spacing {

			word-spacing: -1em;

		}

		.wrap-letter-spacing>div {

			word-spacing: 0;

			/*消除父元素底部的间隔*/

			vertical-align: bottom;

		}

	</style>

</head>

<body>

	<div class="wrap wrap-flex">

		<div class="wrap-item" style="background-color: #238bbc;"></div>

		<div class="wrap-item" style="background-color: #1db561;"></div>

		<div class="wrap-item" style="background-color: #785696;"></div>

	</div>

</body>

</html>

其它的方法

  1. 子元素的闭合标签紧挨着下个元素的开始标签。</div><div>类似这样
  2. 绝对还有其它的方式，欢迎各位积极留言

消除两个inline-block元素之间的间隔的更多相关文章

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

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

  2. 巧用android:divider属性设置LinearLayout中元素之间的间隔

    如上图,要想实现3个button线性排列并且使它们的大小相同.间隔相等.而且整体填充满整个linearlayout,我们一般的做法是在每两个button之间放一个固定宽度的view,然后设置butto ...

  3. 去除行内(inline/inline-block)元素之间的间距

    先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...

  4. li元素之间产生间隔

    是因为li标签换行导致的 简单的解决办法是将所有的li标签写到一行(不过实际上一般不会这样做) 或者把ul设置font-size为0,但这样ul中的文字就会消失,所以要记得单独给子元素设置font-s ...

  5. 关于block元素和inline元素

    呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...

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

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

  7. 相邻元素之间的margin合并问题

    任何元素都可以设置border 设置宽高可能无效 行内元素设置padding,margin上下是无效的,左右是有效的 外边距合并:指的是,当两个垂直外边距相遇时,它们将形成一个外边距. 合并后的外边距 ...

  8. css margin-top设置html元素之间的距离

    css margin-top属性设置的是一个元素的顶端与另一个元素之间的距离.这个距离称为上外边距,本文章向大家介绍css margin-top属性的用法和实例,需要的朋友可以参考一下. css ma ...

  9. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

随机推荐

  1. Nginx 浏览器缓存配置指令

    # 浏览器缓存 # 当浏览器第一次访问服务器资源的时候,服务器返回到浏览器后,浏览器进行缓存 # 缓存的大概内容有: # 1.缓存过期的日期和时间 # 2.设置和缓存相关的配置信息 # 3.请求资源最 ...

  2. 【PHP库】phpseclib - sftp远程文件操作

    需求场景说明 对接的三方商家需要进行文件传输,并且对方提供的方式是 sftp 的服务器账号,我们需根据他们提供的目录进行下载和上传指定文件. 安装 composer require phpseclib ...

  3. luoguP3224 [HNOI2012]永无乡【线段树，并查集】

    洞庭青草,近中秋,更无一点风色.玉鉴琼田三万顷,着我扁舟一叶.素月分辉,明河共影,表里俱澄澈.悠然心会,妙处难与君说. 应念岭表经年,孤光自照,肝胆皆冰雪.短发萧骚襟袖冷,稳泛沧溟空阔.尽挹西江,细斟 ...

  4. java-多态、内部类

    1.多态: 1)意义: 1.1)同一类型的引用,指向不同的对象时,有不同的实现-------行为的多态: cut(),run(),teach()... 1.2)同一个对象,被造型为不同的类型时,有不同 ...

  5. Spark基础入门（01）—RDD

    1,基本概念 RDD(Resilient Distributed Dataset) :弹性分布式数据集 它是Spark中最基本的数据抽象,是编写Spark程序的基础.简单的来讲,一个Spark程序可以 ...

  6. Java中字节流的总结及代码练习

    Java中的字节流 在描述字节流时,先知道什么是流 流可以分为:输入流和输出流 输入流和输出流 示意图: 字节流读取内容:二进制,音频,视频 优缺点:可以保证视频音频无损,效率低,没有缓冲区 字节流可 ...

  7. C#基础_XML文件读写

    使用C#对XML文件进行操作,包括生成一个XML文档,以及读取XML文档中的内容,修改某个元素中的内容 using System; using System.Collections.Generic; ...

  8. 内网技巧-通过SAM数据库获得本地用户hash的方法

    内网技巧-通过SAM数据库获得本地用户hash的方法 在windows上的C:\Windows\System32\config目录保存着当前用户的密码hash.我们可以使用相关手段获取该hash. 提 ...

  9. 【Java】学习路径34-文件IO练习题

    练习题: 1.检测某目录(scr目录为例)下java源程序文件的数量. 参考思路: 首先获取到scr目录,然后使用list()获取所有名字,再使用String类下的endsWith方法检查即可. 参考 ...

  10. 自定义View3-水波纹扩散（仿支付宝咻一咻）实现代码、思想

    PS:自定义view篇-水波纹实现 效果:水波纹扩散 场景:雷达.按钮点击效果.搜索等 实现:先上效果图,之前记得支付宝有一个咻一咻,当时就是水波纹效果,实现起来一共两步,第一画内圆,第二画多个外圆, ...