个人中心
gpt4 book ai didi

li与li之间存在看不见的空白间隔是什么原因引起的？有什么解决办法？

转载 作者：知者 更新时间：2024-03-13 02:37:48 25 4
gpt4 key购买 nike

一、写在前面

<!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>Document</title>
  <style>
    ul {
      width: 400px;
      height: 100px;
    }

    ul li {
      width: 100px;
      display: inline-block;
      height: 100px;
    }

    ul .one {
      background-color: red;
    }

    ul .two {
      background-color: green;
    }

    ul .three {
      background-color: pink;
    }

    ul .four {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <ul>
    <li class="one"></li>
    <li class="two"></li>
    <li class="three"></li>
    <li class="four"></li>
  </ul>

</body>

</html>

如上述代码所示，我们可以看到其中每一个li元素之间都存在空白间隔，那么是什么原因导致的呢?
二、原因
浏览器默认会把display属性为inline或者inline-block元素间的空白字符（空格换行tab）渲染成一个空格。也就是我们上面li元素换行产生的换行符，而它会变成一个空格，当然空格就占用一个字符的宽度。
三、解决方法
3.1、不使用换行，也就是将所有的li都在一行展示

3.2、将ul的字符尺寸设置为0，文字大小为0,则空格就不会被展示，但是如果在ul中设置的字体，需要重新设置

3.3、给ul设置letter-space:-5px,并且给li的letter-space设置为normal
本来以为方法二能够完全解决问题，但经测试，将li父级标签字符设置为0在Safari浏览器依然出现间隔空白；既然设置字符大小为0不行，那咱就将间隔消除了，将下面代码替换方法二的代码，目前测试完美解决。同样随来而来的问题是li内的字符间隔也被设置了，我们需要将li内的字符间隔设为默认。

25 4 0
文章推荐： CSS多列等高如何实现?
文章推荐： kubernetes集群命令行工具kubectl
文章推荐： ‘display‘、‘position‘和‘float‘的相互关系？
文章推荐： Pikachu漏洞靶场 （SSRF服务端请求伪造）
知者
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com