CSS解决display:inline-block产生的缝隙间隙-代码写在一行设置字体大小为0 设置负margin

Bertha 。 2023-01-10 14:48 97阅读 0赞

## 问题:行内存在空隙 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70][]

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

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

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

## 二、设置父元素的font-size:0px，然后再设置各个子元素的font-size数值 ##

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

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

就是后面的元素向前推进  把间隙给隐蔽掉

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Z1amlhbjk1NDQ_size_16_color_FFFFFF_t_70]: /images/20221119/e339aeb686d7401183050379a75bc40d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，97人围观）

还没有评论，来说两句吧...

相关阅读

相关 javaweb：eclipse字体大小设置/编码设置

学习路径![在这里插入图片描述][973d2726547d440cae5a02e2ec128be6.png] 掌握技能： ![在这里插入图片描述][563f39e92a

秒速五厘米/ 2024年04月01日 17:54/ 0 赞/ 128 阅读

相关设置饼图字体大小为18

在 Matplotlib 中，您可以通过以下代码设置饼图字体大小为 18： import matplotlib.pyplot as plt You

约定不等于承诺〃/ 2024年03月25日 16:29/ 0 赞/ 63 阅读

相关 CSS字体大小设置参考

乍一听css字体设置很容易,其实真做起来不然。我们工程师使用原力，他们在不同浏览器调整字体的大小知道的得到合适的结果。实际上有一点深入的理解就能起到很大的作用。 font-s

深藏阁楼爱情的钟/ 2023年10月16日 20:35/ 0 赞/ 98 阅读

相关 android在代码中设置margin属性

public class MainActivity extends Activity { @Override protected void

淩亂°似流年/ 2023年10月04日 12:07/ 0 赞/ 95 阅读

相关 CSS解决display:inline-block产生的缝隙间隙-代码写在一行设置字体大小为0 设置负margin

问题:行内存在空隙 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

Bertha 。/ 2023年01月10日 14:48/ 0 赞/ 98 阅读

相关 Android在java代码中设置margin

我们平常可以直接在xml里设置margin，如： <ImageView android:layout\_margin="5dip" android:src="@draw

快来打我*/ 2022年12月30日 13:33/ 0 赞/ 285 阅读

相关 webstorm字体设置大小

转自：https://blog.csdn.net/maomaoduoer/article/details/49273327 WebStorm是一个捷克公司开发的，功能虽然很强

末蓝、/ 2022年05月22日 00:05/ 0 赞/ 340 阅读

相关 css设置*为margin padding为0之后，页面依然与浏览器顶部有一个间隙

今天遇到个奇葩问题，百思不得其解，最后百度总算解决了这个问题：问题截图： ![这里写图片描述][70] 解决办法： { margin: 0; paddi

电玩女神/ 2022年05月19日 04:13/ 0 赞/ 166 阅读

相关代码动态设置Margins

public static void setMargins(View v, int l, int t, int r, int b) { if (

布满荆棘的人生/ 2022年04月13日 14:57/ 0 赞/ 254 阅读

相关 margin设置为负数

1、为负`margin`“平反” 我们在`CSS`中都会使用`margin`，但将`margin`设置成负数，那可能就不大好处理了。在网页设计中，人们对负`margin`

ゝ一世哀愁。/ 2021年06月26日 16:06/ 0 赞/ 497 阅读