当我们把元素属性display设置成inline-block时，元素之间就会产生间隙

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
ul{list-style-type: none;}
li{
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 30px;
text-align: center;
color: white;
background-color: purple;
}
</style>
</head>
<body>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</body>
</html>

效果如下：

当我们把元素ul 下面的li放在同一行的时候你会惊奇的发现间隙消失了

<li>A</li><li>B</li><li>C</li>

所以我们可以认为元素的间隙是由于“回车”或者换行所导致的，但是如果我们为了消除间隙把元素都写在一行的话未免太不美观了，而且对于下一个接手你工作的人也是一个头疼的事情。所以我们采用另一种方法，font-size：0，为什么能消除呢？我们知道间隙是因为空格或者换行所产生的，而产生了一些空白字符，既然是字符当然拜托不了font的控制啦。

ul{list-style-type: none; font-size: 0;} 对产生间隙元素的父元素

当然方法肯定不止这几种，例如负margin，letter-spacing，word-spacing等等也是可以的

inline-block元素间隙产生及去除方法的更多相关文章

  1. CSS 去掉inline-block元素间隙的几种方法

    最近做移动端页面时,经常会用到inline-block元素来布局,但无可避免都会遇到一个问题,就是inline-block元素之间的间隙.这些间隙会导致一些布局上的问题,需要把间隙去掉.对于inlin ...

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

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

  3. 去掉inline-block元素间隙的几种方法

    <!doctype html><html> <head> <meta charset="UTF-8"> <meta name= ...

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

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

  5. inline-block元素间隙问题原因及解决方法

    inline-block元素间隙问题原因及解决方法 原因: 书写时由空格.换行或回车所产生空白符所致 解决方法: 方法1:font-size:0 方法2:改变书写方式 方法3:使用margin负值 方 ...

  6. 关于css布局中，inline-block元素间隙的处理方法

    关于inline-block元素间隙的处理 参考橱窗外的小孩,原文链接https://www.cnblogs.com/showcase/p/10469361.html 如下,两个inline-bloc ...

  7. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  8. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  9. block元素和inline元素的特点

    一.block元素的特点 1.处于常规流中时,如果width没有设置,会自动填充满父容器 2.可以设置height/width及margin/padding 3.处于常规流中时,布局在前后元素位置之间 ...

随机推荐

  1. QR 码详解（下）

    快速响应矩阵码(下) 书接上回,继续下半场. 纠错码 QR 码采用纠错算法生成一系列纠错码字,添加在数据码字序列之后,使得符号可以在遇到损坏时可以恢复.这就是为什么二维码即使有残缺也可以扫出来.没有残 ...

  2. 2016 10月15日java的动手动脑

    (1) 编写一个方法,使用以上算法生成指定数目(比如1000个)的随机整数. 源程序: //随机数的产生 //zhanxinwu,October,15,2016 public class Recur ...

  3. 使用Spring-boot-starter标准改造项目内的RocketMQ客户端组件

    一.背景介绍 我们在使用Spring Cloud全家桶构建微服务应用时,经常能看到spring-boot-xxx-starter的依赖,像spring-boot-starter-web.spring- ...

  4. vue-cli 中stylus写样式莫名报错？

    报错一: expected "indent", got "eos" 错误截图如下: 在确认stylus安装无误后,我们应该看看是否stylus代码不符合规范. ...

  5. HTML DIV充满整个屏幕

    <!DOCTYPE html> <html> <head> <title>A Little Game!</title> <meta c ...

  6. [插件化开发] Poc之后，我选择放弃OSGI

    Poc之后,我选择放弃OSGI TIPS: 如贵司允许重构老系统或者允许使用OSGI的第三方框架改造所带来的投入成本,并且评估之后ROI乐观,那么还是可以使用的. Runtime Version 以下 ...

  7. 详细解读 Spring AOP 面向切面编程（一）

    又是一个周末, 今天我要和大家分享的是 AOP(Aspect-Oriented Programming)这个东西,名字与 OOP 仅差一个字母,其实它是对 OOP 编程方式的一种补充,并非是取而代之. ...

  8. JetBrains系列软件激活码

    T3ACKYHDVF-eyJsaWNlbnNlSWQiOiJUM0FDS1lIRFZGIiwibGljZW5zZWVOYW1lIjoi5bCP6bifIOeoi+W6j+WRmCIsImFzc2lnb ...

  9. [案例分析] 政务云市场面临的复杂格局——重庆政务云模式的启示：多厂商竞争化、PaaS 化

    新闻背景: 2019 年 9 月底,重庆市大数据应用发展管理局发布政务云平台采购公告,预算金额为 5000 万元,以上 4 家入选. 最终项目被项目被阿里云.腾讯云.华为云.紫光云 4 家瓜分. 50 ...

  10. OptimalSolution(9)--其他问题（1）

    一.从5随机到7及其扩展 题目1:给定一个等概率随机产生1~5的随机函数rand1to5: public int rand1To5() { return (int)(Math.random() * 5 ...