当我们把元素属性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. Linux内核版本介绍与查询

    Linux内核版本命名在不同时期有着不同的规范,在涉及到Linux版本问题时经常容易混淆,主线版本/稳定版/长期支持版本经常搞不清楚,本文主要记录下内核版本命名的规则以及如何查看Linux系统版本信息 ...

  2. 决策树算法系列之一 ID3

    1 什么是决策树 通俗来说,决策树分类的思想类似于找对象 一个女孩的母亲要给这个女孩介绍男朋友 (分类问题.见或不见) 女孩有自己的一套标准 长相 收入 职业 见面与否 丑 高 某箭队经理 不见 中等 ...

  3. 关于Qt画点及计算机专业基础课程介绍

    在计算机图形图像学中,开始都是先画点,我曾经在汇编上tc2.0上画点,后来是MFC,VB,Qt,Python,我觉得对于计算机专业的选择QT的原因是它是个C系的功能强大庞大的库,可以少写很多代码,但是 ...

  4. 快速入门Maven（一）

    一.Maven简介 1.什么是maven Apache组织中的一个颇为成功的开源项目,Maven主要服务于基于Java平台的项目构建.依赖管理和项目信息管理. 2.Maven的好处 构建是程序员每天要 ...

  5. [UWP]使用CompositionLinearGradientBrush实现渐变画笔并制作动画

    1. 什么是 CompositionBrush CompositionBrush(合成画笔)是操作可视化层时用于绘制 SpriteVisual 区域的画笔. 使UWP 应用时可以选择使用 XAML 画 ...

  6. Head First设计模式——装饰者模式

    前言:对于设计模式我们有时候在想是否有必要,因为实际开发中我们没有那么多闲工夫去套用这么多设计模式,也没有必要为了模式而模式. 通常这些模式会引入新的抽象层,增加代码的复杂度,但是当我们掌握了这些设计 ...

  7. 关于while和do while 的个人理解

    先上代码 int x=425; System.out.println("循环开始,我的初始值为:x="+x); //425 do { System.out.println(&quo ...

  8. 01 Python简介、环境搭建及包管理（一）

    一.Python简介 1. Python的特点: 是一门动态.解释型.强类型语言 动态:在运行期间才做数据检查(不用提前声明变量)- 静态语音(C/Java):编译时检查数据类型(编码时需要声明变量类 ...

  9. Shiro权限管理框架（四）：深入分析Shiro中的Session管理

    其实关于Shiro的一些学习笔记很早就该写了,因为懒癌和拖延症晚期一直没有落实,直到今天公司的一个项目碰到了在集群环境的单点登录频繁掉线的问题,为了解决这个问题,Shiro相关的文档和教程没少翻.最后 ...

  10. Java多线程编程（六）单例模式与多线程

    在使用多线程技术的单例模式时会出现一些意想不到的情况,这样的代码如果在生产环境中出现异常,有可能造成灾难性的后果. 一.立即加载/“饿汉模式” 立即加载就是使用类的时候已经将对象创建完毕,常见的实现方 ...