当我们把元素属性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. java集合类之LinkedList详解

    一.LinkedList简介 由于LinkedList是一个实现了Deque的双端队列,所以LinkedList既可以当做Queue,又可以当做Stack,在将LinkedList当做Stack时,使 ...

  2. sql server中Set与select的区别

    Set与select的区别 Set select 同时多个变量赋值 不支持 支持 表达式返回多个值时 出错 将返回的最后一个值赋给变量 表达式未返回值 变量被null赋值 变量保持原始值

  3. 微信小程序中事件

    微信小程序中事件 一.常见的事件有 类型 触发条件 最低版本 touchstart 手指触摸动作开始 touchmove 手指触摸后移动 touchcancel 手指触摸动作被打断,如来电提醒,弹窗 ...

  4. (未完)XSS漏洞实战靶场笔记

    记录下自己写的XSS靶场的write up,也是学习了常见xss漏洞类型的实战场景

  5. Python之random模块和time模块

    1.random()模块的使用   import random x = random.random() y = random.random() print(x,y*10) #random.random ...

  6. [Luogu3420][POI2005]SKA-Piggy Banks

    题目描述 Byteazar the Dragon has NNN piggy banks. Each piggy bank can either be opened with its correspo ...

  7. Spring整合Mybatis（IDEA版）

    本文适用于初学者: 该文主要教大家如何整合spring和mybatis,整合完成效果,可以从数据库中查询出学生信息: 完整的工程目录如下: 整合思路: 需要spring来管理数据源信息. 需要spri ...

  8. Spring Boot提供RESTful接口时的错误处理实践

    使用Spring Boot开发微服务的过程中,我们会使用别人提供的接口,也会设计接口给别人使用,这时候微服务应用之间的协作就需要有一定的规范. 基于rpc协议,我们一般有两种思路:(1)提供服务的应用 ...

  9. Kafka、Redis和其它消息组件比较

    Kafka作为时下最流行的开源消息系统,被广泛地应用在数据缓冲.异步通信.汇集日志.系统解耦等方面.相比较于RocketMQ等其他常见消息系统,Kafka在保障了大部分功能特性的同时,还提供了超一流的 ...

  10. Java基础（二十三）集合（6）Map集合

    Map接口作为Java集合框架中的第二类接口,其子接口为SortedMap接口,SortedMap接口的子接口为NavigableMap接口. 实现了Map接口具体类有:HashMap(子类Linke ...