当我们把元素属性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. C--二分搜索

    //二分搜索 //时间复杂度小 log2 n int search(int key, int a[], int len) { ; ; ; int mid; while(left<right) { ...

  2. 使用AddLayer方法加载shp文件中使用的Map、Dataset等对象详解

    内容源自:ArcGIS Engine+C#入门经典 方法二:使用axMapControl1对象的AddLayer方法加载ShapeFile文件 添加ShapeFile文件需要用到Map.Dataset ...

  3. shark恒破解笔记6-BC++假自效验

    这小节介绍了查壳(peid) 查软件编写语言(die)以及用esp定律脱aspack壳,最后是破解bc++的自校验部分 目标: 首先查看软件 peid查壳 有壳 ,但是不知道是什么语言写的,这里使用D ...

  4. PHP array_udiff_uassoc

    1.函数的参数:返回数组的差集.用定义的函数比较键值和值. 2.函数的参数: @params array $array @params array $array1 ... @params callab ...

  5. [NOIp2013] luogu P1966 火柴排队

    磕了瓶魔爪. 题目描述 你有两个长度为 NNN 的数组 a,ba,ba,b,试重新排列 aaa 数组使得S=∑i=1n(ai−bi)2S=\sum_{i=1}^{n}{(a_i-b_i)^2}S=i= ...

  6. 020 - FreeRTOS学习路线总结

    零.为什么写? 在H7-tools预售群里,有位朋友提出如何学习FreeRTOS这类的问题,便由此总结下自己的学习路线.最近又打算接触RTT,和FreeRTOS做个对比. 文章分两步来讲,学习路线和学 ...

  7. git jenkins 基本部署 gitlab私有仓库

    从代码私有性方面来看,公司不希望员工获取到全部的代码,这个时候 GitLab 无疑是最佳的选择.但对于开源项目而言,GitHub 依然是代码托管的首选平台. 1.安装gitlab[root@gitla ...

  8. 百万年薪python之路 -- 前端CSS基础介绍

    一. CSS介绍 CSS定义 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 语法结构 div{ color: green ...

  9. 实现文字色彩渐变（Mask）

    文字色彩渐变是指的文字本身的颜色,不是背景渐变.要实现此效果可以采用Mask组件,本文先从介绍mask说起 1)Mask介绍 mask组件实现的作用是,mask组件所在游戏物体下的子游戏物体在mask ...

  10. （三）Kinect姿势识别

    Kinect给我们内置了许多姿势如举手等,具体可参考枚举KinectGestures.Gestures,也可以通过Kinect姿势管理器,自定义姿势导入(坑较多,内置的基本够用了)也可以根据关节坐标自 ...