如何消除inline-block元素之间的间隙？
一、问题现象
在CSS布局中，如果我们想要将多个行内块元素并排，会发现同行显示的inline-block元素之间会出现一定的空隙，这就是换行符/空格导致的，叫做换行符/空格间隙。
1 <!DOCTYPE html>
2 <html lang="zh-cn">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>如何消除inline-block元素之间的间隙</title>
8 </head>
9 <style>
10 .father {
11 width: 300px;
12 height: 250px;
13 background-color: #c3deb7;
14 }
15
16 .son {
17 display: inline-block;
18 width: 130px;
19 height: 50px;
20 background-color: #f9cc9d;
21 }
22 </style>
23
24 <body>
25 <div class="father">
26 <span class="son">行内块元素</span>
27 <span class="son">行内块元素</span>
28 </div>
29
30 </body>
31 </html>
二、产生原因
当使用行内元素进行排版的时候，元素之间的符号采取一个都不放过的原则，通通都会都浏览器渲染，其中就包括换行符和空格，这两个极易被我们忽视的符号也会被浏览器渲染。，根据white-space的处理方式（默认是normal，合并多余空白）会将HTML中回车换行符转换成空白符，在字体不为空的情况下，会占据一定的空间，这就形成了我们所看到的inline-block元素之间的空隙。空隙的大小由字体大小决定，当行内元素font-size：16px时，间距为8px。
三、解决方案
在网上找了很多资料发现就以下两种方法缺点少一点比较实用，so，咱还是来点实用的吧。
方法一：为父元素中设置font-size: 0，在子元素上重置正确的font-size
.father {
font-size: 0;
width: 300px;
height: 250px;
background-color: #c3deb7;
}
.son {
font-size: 16px;
display: inline-block;
width: 130px;
height: 50px;
background-color: #f9cc9d;
}
不足之处：该方法必须要为子元素设置字体大小，否则子元素中的字体不会显示，增加了一点代码量。
方法二：设置父元素的CSS样式，display：table
.father {
display: table;
width: 300px;
height: 250px;
background-color: #c3deb7;
}
不足之处：父级元素不能与其他元素并排。
效果图：
参考文档：https://blog.csdn.net/qq_32614411/article/details/82223624、https://www.cnblogs.com/lynnmn/p/6274700.html
如何消除inline-block元素之间的间隙？的更多相关文章
- CSS3如何去除 inline block 元素之间多出的空格
display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...
- 当li设置为line-block时，元素之间出现间隙的原因和解决方法
原因 因为浏览器默认把inline元素之间的空白符(Tab.空格.换行)渲染成一个空格.而如下述代码,两个li元素之间的换行符被渲染成一个空格,则元素之间产生了间隙. 用Chrome浏览器将场景模拟出 ...
- 去除行内(inline/inline-block)元素之间的间距
先展示一下,行内元素之间存在间距,实例代码如下: <style> div { color: #fff; padding: 25px 50px; } .inline-f00 { displa ...
- inline-block元素之间出现间隙
一.问题 这里部分的组成是一个input框和一个a按钮,然后a标签为了设置它的width和height我让他display:inline-block(行内元素以块级元素显示内容).神奇的一幕出现了,两 ...
- 关于block元素和inline元素
呃...这个会不会太基础了.最近在复习,所以基础知识也不能够忽略. 根据HTML 4.01 规范,其描述如下(http://www.w3.org/TR/html401/struct/global.ht ...
- 去除inline-block之间的间隙
在使用display: inline-block;时,这些inline-block之间会有间隙,根据无双 - <去除inline-block元素间的空隙>的说法,这个间隙是4px或者8px ...
- block元素和inline元素的特点
一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...
- inline元素、block元素
inline元素 不会独占一行,相邻的行内元素会排列在同一行内,直到一行排不下才会换行 高.行高.以及外边距和内边距不可改变 宽度就是它的文字或图片的宽度,不可改变,随元素内容变化而变化 内联元素只能 ...
- 多个inline元素、block元素、inline-block元素在父容器中的换行情况
1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...
随机推荐
- Windows10查看电脑的USB接口是2.0还是3.0
Windows10查看电脑的USB接口是2.0还是3.0原创小晓酱手记 最后发布于2019-08-22 16:09:48 阅读数 3662 收藏展开 同事要拷贝资料给我,问我电脑的USB接口是2.0还 ...
- JFlash ARM对stm32程序的读取和烧录-(转载)
本篇文章主要是记录一下JFlash ARM 的相关使用和操作步骤,读取程序说不上破解,这只是在没有任何加密情况下对Flash的读写罢了!在我们装了JLINK驱动后再根目录下找到JFlash ARM , ...
- SpringMVC Web 相对路径与绝对路径
基本概念 绝对路径 绝对路径就是你的主页上的文件或目录在硬盘上真正的路径,(URL和物理路径) 例如: C:\xyz\test.txt 代表了 test.txt 文件的绝对路径. http://www ...
- Java求余%引发的一连串故事
C1 RCE对%的处理 HotSpot VM的C1有个RCE(Range Check Elimination,范围检查消除)优化,所谓范围检查消除,就是为了正确的抛出数组越界异常,虚拟机需要在数组访问 ...
- Day30 BigInteger和BigDecimal
BigInteger与BigDecimal BigInteger类 Integer类作为int的包装类,能存储的最大整型值为2 31-1,Long类也是有限的, 最大为2 63-1.如果要表示再大的整 ...
- macOS Big Sur 11.3 (20E232) 正式版发布，百度网盘下载
本站提供的 macOS Big Sur 软件包,即可以直接拖拽到 Applications(应用程序)下直接安装,也可以制作启动 U 盘安装,或者直接在虚拟机中启动安装. 请访问原文链接:https: ...
- 处理SpringMVC中遇到的乱码问题
乱码在日常开发写代码中是非常常见的,以前乱码使用的是通过设置一个过滤器解决, 现在可以使用SpringMVC给提供的过滤器,在web.xml设置,这比我们自己写的过滤器强大的的多. 注意:每次修改了x ...
- 基于雪花算法生成分布式ID(Java版)
SnowFlake算法原理介绍 在分布式系统中会将一个业务的系统部署到多台服务器上,用户随机访问其中一台,而之所以引入分布式系统就是为了让整个系统能够承载更大的访问量.诸如订单号这些我们需要它是全局唯 ...
- MindInsight计算图可视设计
MindInsight计算图可视设计 特性背景 计算图可视的功能,主要协助开发者在下面这些场景中使用. 开发者在编写深度学习神经网络的代码时,可以使用计算图的功能查看神经网络中算子的数据流走向,以及模 ...
- 现代传感器的接口：中断驱动的ADC驱动程序
现代传感器的接口:中断驱动的ADC驱动程序 Interfacing with modern sensors: Interrupt driven ADC drivers 研究了如何编写一个阻塞的模数转换 ...