css解决display:inline-block;产生的缝隙（间隙）

最新推荐文章于 2022-11-08 14:50:02 发布

codingWeb

最新推荐文章于 2022-11-08 14:50:02 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： css html 前端

本文链接：https://blog.youkuaiyun.com/fesfsefgs/article/details/95760710

前端同时被 3 个专栏收录

116 篇文章

订阅专栏

css

17 篇文章

订阅专栏

html

12 篇文章

订阅专栏

当使用display:inline-block时，元素间会出现符合W3C标准的间隙，由换行符引起。解决方法包括避免书写空格，设置父元素font-size为0，以及使用负margin，其中前两者为推荐做法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display：inline-block的缝隙

在这里插入图片描述

<style type="text/css">
   *{
     border: 0;
     padding: 0;
     margin: 0;
   }
   ul li{
     display: inline-block;
     border: 1px solid #000000;
   }
</style>
<body>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
      <li>5555</li>
    </ul>
  </body>

这每个li之间的间隙是符合W3C标准规范的表现，是元素书写的时候换行产生的空白符造成的问题。但不满足业务需求。完善这种的缝隙有如下几种方法：

一、书写的时候，省略空格

在这里插入图片描述

 <body>
    <ul>
      <li>1111</li><li>2222</li><li>3333</li><li>4444</li><li>5555</li>
    </ul>
  </body>

二、第一种方法，元素少的情况下还可以满足，但不符合实际业务开发。第二种方法就是设置父元素的font-size:0px，然后再设置各个子元素的font-size数值。

ul{
font-size: 0;
}
ul li{
  display: inline-block;
  border: 1px solid #000000;
  font-size: 14px;
}
 <body>
    <ul>
        <li>1111</li>
         <li>2222</li>
         <li>3333</li>
         <li>4444</li>
         <li>5555</li>
    </ul>
</body>