css面试题:li与li之间的空白间隙是什么?

最新推荐文章于 2023-07-08 17:23:50 发布

爱思考的猪

最新推荐文章于 2023-07-08 17:23:50 发布

阅读量811

点赞数 1

分类专栏： JavaScript 前端文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_44621394/article/details/126539764

版权

前端同时被 2 个专栏收录

57 篇文章 0 订阅

订阅专栏

JavaScript

38 篇文章 1 订阅

订阅专栏

先看现象

<!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>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 500px;
      height: 300px;
    }

    li {
      display: inline-block;
      width: 100px;
      height: 100px;
      background: pink;
    }
  </style>
</head>

<body>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</body>

</html>

在这里插入图片描述

从结果我们可以看到li与li之间有着5px左右的空白间隙,而且li与li之间不存在margin和padding。

原因

这个空白间隙实际上是一个空格。inline、inline-block、inline-flex等行内布局方式会将换行/tab/空格渲染成空格。

解决方法

将li写在一行

  <ul>
  <li></li><li></li><li></li><li></li><li></li>
  </ul>

设置display:table-cell;
设置font-size:0;会影响文字显示,如果要显示文字则改方法不适用。
ul设置letter-spacing:-5px; li设置letter-spacing:normal;

总结 inline会将换行/tab/空格渲染成空格,导致页面出现空白间隙

爱思考的猪

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css面试题:li与li之间的空白间隙是什么?

从结果我们可以看到li与li之间有着5px左右的空白间隙,而且li与li之间不存在margin和padding。这个空白间隙实际上是一个空格。inline、inline-block、inline-flex等行内布局方式会将换行/tab/空格渲染成空格。设置display:table-cell;设置font-size:0;会影响文字显示,如果要显示文字则改方法不适用。ul设置letter-spacing:-5px; li设置letter-spacing:normal;...
复制链接

扫一扫