li 与 li 之间设置display: inline-block；后有看不见的空白间隔如何形成的,相应的解决办法

最新推荐文章于 2023-02-06 10:23:01 发布
最新推荐文章于 2023-02-06 10:23:01 发布
阅读量5.2k 收藏
点赞数 1
分类专栏： 前端 css HTML 文章标签： html5 css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhiyue2/article/details/117991518
版权

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 前端CSS 相关的内容; 不积跬步，无以至千里, 戒焦戒躁 。

最近一段时间很少能够静下心来深入研究技术，主要是工作太忙，项目如同流水一样，每天都在不停的开发，除了开发还是开发；晚上夜深人静的时间可以终于可以抽出时间来研究一下技术，一时之间又不知道从哪里开始了；想了想就去网上寻找一些有趣的现象，还真的被找到了 ‘li元素标签设置为 inline-block 之后，li 元素之间会留有空隙’ 。记忆中记得之前有研究过相关内容，但是时间太久了，记忆很模糊了，就想着实际代码操作一下看看相关现象，代码解决一下。就是这样的好奇，让我发现了其它的一些现象 ‘body 没有设置高度 / 或者设置部分高度, 对 body 设置背景颜色, 仍然会铺满全屏; 当对 html 元素设置背景色时, 屏幕显示的又是 html 设置的背景色’, 这个会在下一篇文章中进行代码演示以及讲解 。
在这里大家有没有在开发中遇到问题在解决时, 突然发现一些有趣的现象, 或者了解有趣的现象, 大家可以在这里分享讨论。
软件编程本来是一件非常有趣的事情, 如果大家能够深入研究肯定会发现乐趣无穷, 同时满足自己的成就感 。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

<style>
/* 公共代码样式设置 */
.w_clearance-shel {
  /* background-color: lightsteelblue; */
  background-color: red;
}
.w_ul-outer .w_ul-item {
  width: 180px;
  height: 150px;
  /* 这里的设置一定不要漏掉, 否则无法看到这种现象 */
  display: inline-block;

  font-size: 32px;
  font-weight: 5;
  text-align: center;
  line-height: 150px;
}
.w_li-fir {
  background-color: aquamarine;
}
.w_li-sec {
  background-color: burlywood;
}
.w_li-thi {
  background-color: darkcyan;
}
.w_li-for {
  background-color: darkgrey;
}
.w_li-fiv {
  background-color: darkorange;
}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 由 li与li之间有看不见的空白间隔 引发的惨案(思考) </title>
</head>
<body>
  <div class="w_clearance-shel">
    <ul class="w_ul-outer">
      <li class="w_ul-item w_li-fir">1</li>
      <li class="w_ul-item w_li-sec">2</li>
      <li class="w_ul-item w_li-thi">3</li>
      <li class="w_ul-item w_li-for">4</li>
      <li class="w_ul-item w_li-fiv">5</li>
    </ul>
  </div>
</body>

</html>
解决方法代码: 1
<style>
/*
  这里查找相关资料发现很多人设置 margin-left: -3px; 或者 margin-left: -5px;
  我在这里仔细的验证一下, 发现 -3px 、 -5px , 都不能完全消除， 试验了几次, 发现
  margin-left: -5.2px; 是刚好合适, 在设置这个值的时候, 间隙是完全消除的 。

  这里其实是根据我们使用的浏览器的默认字体大小不同而不同, 需要我们去验证, 这也造成了兼容问题,
  如果又遇到该问题同学使用这个方法的时候要注意这个问题 。

  在这里你是不是也想到自己, 在项目遇到一些问题, 由于各种原因: 比如项目时间紧, 或者觉得
  解决方法很容易, 感觉这个问题就不必深究; 其实这样有些不可取, 也是对自己不太负责任 。 当我们
  真的去了解、研究我们遇到的问题时, 你会感觉你的世界新开了一扇窗; 当然这个问题不会让人产生
  这样的感觉, 哈哈哈哈 。
 */
.w_ul-outer .w_ul-item {
  /* margin-left: -3px; */
  /* margin-left: -5px; */
  margin-left: -5.2px;
}
</style>
margin-left: -3px 效果图

a:-3px---效果.png

margin-left: -5px 效果图

a:-5px---效果.png

margin-left: -5.2px 效果图

a:-5。2px---效果.png

解决方法代码: 2
/*
这个方法可以解决 '完美解决' 间隙问题; 但是它会造成一个问题: 子元素必须设置  font-size 字体大小 。
这样无形中会增加我们部分代码量和工作量, 对于自己没有要求的, 这个方法可以算作完美的解决方法 。
看到一些博客上有说这个方法在 谷歌浏览器 上无效, 但是自己验证了一下, 是生效的; 这里也希望各位同学在看一些网上资料的时候有时间要自己验证一下, 否则当你几下一个错误的答案时, 那是一件令人痛苦的事情 。
(这里也隐藏另外一个问题: 各个浏览器不是有自己的默认最小生效字体吗, 元素设置 font-size: 1/2/3/4/5/6/7/8/9/10; 字体的大小都是不变的, 为什么父元素设置 font-size: 0; 之后子元素内容会消失呢, 这个问题将在之后的文章中讲解)
 */
.w_ul-outer {
  font-size: 0;
}
效果图:

a:-size-0---效果.png

解决方法代码: 3
/*
为 inline-block 元素标签设置 float:left (清浮动的8种方法)
现在浮动这个方法已经很少使用, 在我的印象中只从开始使用弹性布局之后, 就没有使用浮动布局; 因为浮动每次在页面渲染的时候会消耗较大, 每次都需要重绘与重排。
 */
.w_ul-item {
  float: left;
}
/* 清浮动 */
.w_ul-outer {
  overflow: hidden;
  zoom: 1;
}
效果图:

a:-float---效果.png

解决方法代码: 4
/*
父元素设置:  display:table 和 word-spacing
它的优点在于使用它无需担忧兼容问题 。
 */
.w_ul-outer {
  display: table;
  word-spacing: -1em;
}
效果图:

a:-table---效果.png

解决方法代码: 5
/*
不换行, 这样的代价有点大, 代码的 优美度、维护性、观赏性 都不忍直视; 强烈建议不要使用这个方法 。

<ul class="w_ul-outer">
  <li class="w_ul-item w_li-fir">1</li><li class="w_ul-item w_li-sec">2</li><li class="w_ul-item w_li-thi">3</li><li class="w_ul-item w_li-for">4</li><li class="w_ul-item w_li-fiv">5</li>
</ul>

 */
效果图:

a:-no---效果.png

真实原因:

我们在使用 display: inline-block; 的时候, 浏览器的默认行为是把 inline 元素间的空白字符 (空格换行tab/enter) 渲染成一个空格, 也就是我们上面的代码<li>或者其它的元素标签换行后会产生换行字符, 而它会变成一个空格, 当然空格就占用一个字符的宽度, 所以两个 元素标签 之间的空格间隙就是这么出来了 。

这不是li的问题, 而是 display:inline-block 本身的问题, 更准确的说是浏览器解析问题 。 在 CSS 布局中, 如果我们想要将一些元素在同一行显示, 其中的一种方法就是把要同行显示的元素设置 display: inline-block; 。 但是你会发现这些同行显示的 inline-block 元素之间经常会出现一定的空隙, 这就是 "换行符/空格间隙问题"。

元素被当成行内元素排版的时候, 元素之间的空白符 (空格、回车换行等) 都会被浏览器处理, 根据 white-space 的处理方式 (默认是normal，合并多余空白), 原来 HTML 代码中的回车换行被转成一个空白符, 在字体不为 0 的情况下, 空白符占据一定宽度, 所以 inline-block 的元素之间就出现了空隙 。 这些元素之间的间距会随着字体的大小而变化, 当行内元素默认字体为font-size:16px 时, 间距为 8px 。
使用 div 元素标签代码展示(对真实原因的一种代码解析):
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 由 li与li之间有看不见的空白间隔 引发的惨案(思考) </title>
</head>

<style>
html {
  /* background-color: red; */
}
body {
  /* background-color: #ccc; */
}

/* 公共代码样式设置 */
.w_clearance-shel {
  /* background-color: lightsteelblue; */
  background-color: red;
}
.w_ul-outer .w_ul-item {
  width: 180px;
  height: 150px;
  /* 这里的设置一定不要漏掉, 否则无法看到这种现象 */
  display: inline-block;

  font-size: 32px;
  font-weight: 5;
  text-align: center;
  line-height: 150px;
}
.w_li-fir {
  background-color: aquamarine;
}
.w_li-sec {
  background-color: burlywood;
}
.w_li-thi {
  background-color: darkcyan;
}
.w_li-for {
  background-color: darkgrey;
}
.w_li-fiv {
  background-color: darkorange;
}
</style>
<body>
  <div class="w_clearance-shel">
    <div class="w_ul-outer">
      <div class="w_ul-item w_li-fir">1</div>
      <div class="w_ul-item w_li-sec">2</div>
      <div class="w_ul-item w_li-thi">3</div>
      <div class="w_ul-item w_li-for">4</div>
      <div class="w_ul-item w_li-fiv">5</div>
    </div>
  </div>
</body>

</html>
完整代码展示:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 由 li与li之间有看不见的空白间隔 引发的惨案(思考) </title>
</head>

<style>
html {
  /* background-color: red; */
}
body {
  /* background-color: #ccc; */
}

/* 公共代码样式设置 */
.w_clearance-shel {
  /* background-color: lightsteelblue; */
  background-color: red;
}
.w_ul-outer .w_ul-item {
  width: 180px;
  height: 150px;
  /* 这里的设置一定不要漏掉, 否则无法看到这种现象 */
  display: inline-block;

  font-size: 32px;
  font-weight: 5;
  text-align: center;
  line-height: 150px;
}
.w_li-fir {
  background-color: aquamarine;
}
.w_li-sec {
  background-color: burlywood;
}
.w_li-thi {
  background-color: darkcyan;
}
.w_li-for {
  background-color: darkgrey;
}
.w_li-fiv {
  background-color: darkorange;
}


/* 解决方法代码: 1 */
/*
  这里查找相关资料发现很多人设置 margin-left: -3px; 或者 margin-left: -5px;
  我在这里仔细的验证一下, 发现 -3px 、 -5px , 都不能完全消除， 试验了几次, 发现
  margin-left: -5.2px; 是刚好合适, 在设置这个值的时候, 间隙是完全消除的 。

  这里其实是根据我们使用的浏览器的默认字体大小不同而不同, 需要我们去验证, 这也造成了兼容问题,
  如果又遇到该问题同学使用这个方法的时候要注意这个问题 。

  在这里你是不是也想到自己, 在项目遇到一些问题, 由于各种原因: 比如项目时间紧, 或者觉得
  解决方法很容易, 感觉这个问题就不必深究; 其实这样有些不可取, 也是对自己不太负责任 。 当我们
  真的去了解、研究我们遇到的问题时, 你会感觉你的世界新开了一扇窗; 当然这个问题不会让人产生
  这样的感觉, 哈哈哈哈 。
 */
.w_ul-outer .w_ul-item {
  margin-left: -5.2px;
}


/* 解决方法代码: 2 */
/*
这个方法可以解决 '完美解决' 间隙问题; 但是它会造成一个问题: 子元素必须设置  font-size 字体大小 。
这样无形中会增加我们部分代码量和工作量, 对于自己没有要求的, 这个方法可以算作完美的解决方法 。
看到一些博客上有说这个方法在 谷歌浏览器 上无效, 但是自己验证了一下, 是生效的; 这里也希望各位同学在看一些网上资料的时候有时间要自己验证一下, 否则当你几下一个错误的答案时, 那是一件令人痛苦的事情 。
(这里也隐藏另外一个问题: 各个浏览器不是有自己的默认最小生效字体吗, 元素设置 font-size: 1/2/3/4/5/6/7/8/9/10; 字体的大小都是不变的, 为什么父元素设置 font-size: 0; 之后子元素内容会消失呢, 这个问题将在之后的文章中讲解)

 */
/* .w_ul-outer {
  font-size: 0;
} */


/* 解决方法代码: 3 */
/*
为 inline-block 元素标签设置 float:left (清浮动的8种方法)
现在浮动这个方法已经很少使用, 在我的印象中只从开始使用弹性布局之后, 就没有使用浮动布局; 因为浮动每次在页面渲染的时候会消耗较大, 每次都需要重绘与重排。
 */
/* .w_ul-item {
  float: left;
} */
/* 清浮动 */
/* .w_ul-outer {
  overflow: hidden;
  zoom: 1;
} */


/* 解决方法代码: 4 */
/*
父元素设置:  display:table 和 word-spacing
它的优点在于使用它无需担忧兼容问题 。
 */
/* .w_ul-outer {
  display: table;
  word-spacing: -1em;
} */


/* 解决方法代码: 5 */
/*
不换行, 这样的代价有点大, 代码的 优美度、维护性、观赏性 都不忍直视; 强烈建议不要使用这个方法 。
<ul class="w_ul-outer">
  <li class="w_ul-item w_li-fir">1</li><li class="w_ul-item w_li-sec">2</li><li class="w_ul-item w_li-thi">3</li><li class="w_ul-item w_li-for">4</li><li class="w_ul-item w_li-fiv">5</li>
</ul>
 */
</style>
<body>
  <div class="w_clearance-shel">
    <ul class="w_ul-outer">
      <li class="w_ul-item w_li-fir">1</li>
      <li class="w_ul-item w_li-sec">2</li>
      <li class="w_ul-item w_li-thi">3</li>
      <li class="w_ul-item w_li-for">4</li>
      <li class="w_ul-item w_li-fiv">5</li>
    </ul>

    <!-- <ul class="w_ul-outer">
      <li class="w_ul-item w_li-fir">1</li><li class="w_ul-item w_li-sec">2</li><li class="w_ul-item w_li-thi">3</li><li class="w_ul-item w_li-for">4</li><li class="w_ul-item w_li-fiv">5</li>
    </ul> -->

    <!-- <div class="w_ul-outer">
      <div class="w_ul-item w_li-fir">1</div>
      <div class="w_ul-item w_li-sec">2</div>
      <div class="w_ul-item w_li-thi">3</div>
      <div class="w_ul-item w_li-for">4</div>
      <div class="w_ul-item w_li-fiv">5</div>
    </div> -->

  </div>
</body>

</html>
如果对你有所帮助，大家可以点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。
黑木令
关注
专栏目录
li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？
m0_38066007的博客
04-22 217
（3）将内的字符尺寸直接设为0，即font-size:0。不足：中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。（4）消除的字符间隔letter-spacing:-8px，不足：这也设置了内的字符间隔，因此需要将内的字符间隔设为默认letter-spacing:normal。为了美观，通常是一个放在一行，这导致换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
热门推荐
sjinsa的博客
04-28 1万+
有时，在写页面的时候，会需要将<li>这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个<li>元素之间会出现大约8px左右的空白间隙，下面举例说明：<html> <head> <title>demo</title> <style type="text/css"> *{ margin:0; padding:0; } body {
CSS 问题 中 li{display:inline;}的作用
CaseyWei
07-15 1484
&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;ul{list-style-type:none;width:100%;padding:0;margin:0;float:left;}a{text-decoration:none;float:left;background-color:green;width:120px;font-size:15...
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？以及类似的实际问题解决。
最新发布
qq_55748881的博客
02-06 1771
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
div和img之间的空白间隔_CSS篇(021)-li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？...
weixin_39742727的博客
11-30 126
答案：浏览器的默认行为是把 inline 元素间的空白字符（空格换行 tab）渲染成一个空格，也就是我们上面的代码<li>换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。解决方案：方法一：既然是因为`<li>`换行导致的，那就可以将`<li>`代码全部写在一排，如下<方法二：我们为了代码美观以及方便修改，很多时候我们不可能将`&lt...
li设置display:inline-block；后显示出现问题，（踩过的坑）分享下如何解决！
mafeilong618的博客
07-15 2186
今天在开发中要求写一个横向滑动的菜单，然后在给li设置display:inline-block后脱离ul内容的区域，后来经过分析以为是ul的高度给的不够，但是仔细分析后觉得不管多高都不应该脱离内容区域的。 先上代码: <div class="container"> <ul class="list-tab"> <li class="active">一汽大众一汽大众</li>
当li设置为inline-block之后消除元素之间的间距
zmeilin的博客
07-31 1163
今天在仿酷狗音乐官网的时候，在写一个导航栏的时候，遇到了这样的一个问题（为直观一点，这里我们将它的背景颜色设置为红色）： 如下，将两个ul中的li设置为inline-block之后，理想中的状态应该是像这样，两个li元素之间并没有任何的间隔，连在一起的， 然而实际上的状态是， 为什么呢？ 浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上...
让IE6/IE7支持display:inline-block属性的两种方法
09-25
然而，IE6和IE7这两个较老的浏览器对`display:inline-block`的支持并不完善，这给开发者带来了不小的困扰。为了解决这个问题，本文将详细介绍两种方法，使得这些旧版IE浏览器也能正确地处理`display:inline-block`。...
CSS教程：inline-block在各浏览器的显示
12-03
在`inline-block`元素中，如果不进行特殊设置，它们的基线会与其父元素的基线对齐，可能导致元素位置不准确。解决这个问题的一个常见方法是设置`vertical-align: top`，这样元素的顶部会与父元素的顶部对齐，从而...
css之display属性之inline-block布局实现详解
11-21
- **间隙问题**：在`inline-block`元素之间有时会出现4像素的间隙，这是由于换行产生的空白字符导致的。 - **去除空隙的方法**： - 对父元素设置`font-size: 0`，这样空白字符的大小也会变为0，消除间隙。 - ...
将<li>标签设置display:inline-block;属性后，<li>之间出现空白间隙，原因及解决办法
qq_43072133的博客
06-13 1230
将li标签设置display:inline-block;属性后，li之间出现空白间隙，原因及解决办法 原因：浏览器的默认行为是把inline元素间的空白字符渲染成一个空格，li换行后会产生换行字符，而它会变成一个空格 解决办法1：设置ul标签font-size：0；设置li标签font-size为你想要的字体大小 解决办法2：把代码写成li标签在一行，如下 <ul> <li&g...
li和li之间有看不见的空白间隔怎么办？写了两个a标签，两个标签之间有空格的情况怎么解决？
weixin_47227886的博客
04-11 666
原因：浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格； 为了美观，我们通常是一个<li>放在一行，这导致<li>换行后产生换行字符，她变成一个空格，占用了一个字符的宽度。 1. li和li之间有看不见的空白间隔怎么办？ 解决方法： （1）为<li>设置float:left。不足：有些容器不能设置浮动，如左右切换的焦点图等； （2）将所有<li>写在一行。不足：代码不美观； （3）将<ul>内的字符大
Css 问题记录
野生松
10-20 142
1、lii与li之间存在空白间隔 原因：行框的排列会受到中间空白（回车空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔。 解决方法： 可以将<li>代码全部写在一排 浮动li中float：left 在ul中用font-size：0；可以使用letter-space：-3px ...
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？（十三）
kiku
10-05 2033
li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？ 引起这种空白间隔的原因： 浏览器的默认行为是把inline元素间的空白字符（空格换行tab）渲染成一个空格，也就是我们上面的代码换行后会产生换行字符，而它会变成一个空格，当然空格就占用一个字符的宽度。 解决方案： 方法一： 既然是因为换行导致的，那就可以将< li>代码全部写在一排，如下 <div class=...
【html5/css3】四种方法解决 li与li之间有看不见的空白间隔
Umbrella_Um的博客
08-11 3863
场景需求： 有时，在写页面的时候，会需要将这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个元素之间会出现大约8px左右的空白间隙，下面举例说明看看这种现象： 对应html： <div class="box"> <ul> <li class="part1">red</li> <l...
li与li之间存在看不见的空白间隔是什么原因引起的？有什么解决办法？
weixin_47450807的博客
04-07 2236
一、写在前面 <!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑木令

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值