提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

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

CSS 解决 产生 Block display inline 间隙
2023-09-11 14:22:30 时间

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>

方法三：负margin方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。

以上三种方法，前两种是比较好的解决办法，第三种方法不推荐使用。网上还有其他的解决办法，但我认为还是前两种比较好。

原文 https://www.cnblogs.com/tnnyang/p/6136973.html

相关文章