CSS display:inline-block的边距问题及解决方法_css inline-block 有边距-CSDN博客

本文链接：https://blog.csdn.net/weixin_43744709/article/details/106287193

当CSS中display属性设置为inline-block时，元素间会存在诡异的边距。本文介绍了四种解决方法：1) 设置父容器font-size:0，然后在子容器中恢复字号；2) 将所有inline-block元素写在同一行；3) 将相邻元素的结束和开始标签紧挨着写，消除空格；4) 将元素结束标签的'>'移至下一行。这些方法有助于消除浏览器默认的间距问题。

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

将一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使使用（*{margin:0;padding:0;}）也是无法消除

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    	<div class="example">
        	<div></div>
        	<div></div>
        	<div></div>
        </div>
    </body>
</html>

在这里插入图片描述

第一种方法 :(推荐)

使用font-size:0;
在父容器上使用font-size:0;子容器上设置合适字号; 可以消除间隙 :

		<div class="example">
        	<div></div>
        	<div></div>
        	<div></div>
		</div>
    .example{font-size: 0;}
    .example div{
         background: red;
         display: inline-block;
         font-size: 16px; /*要设置相应的字号*/
    }

对于Chrome, 其默认有最小字体大小限制，考虑到兼容性，需要取消字体大小限制，这样写：

		<div class="example">
        	<div></div>
        	<div></div>
        	<div></div>
		</div>
    .example{font-size: 0;-webkit-text-size-adjust:none;}
    .example div{
         background: red;
         display: inline-block;
         font-size: 16px; /*要设置相应的字号*/
    }

第二种方法：

转换为inline-block的元素写在一起，不换行就行:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
           .example div{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    	<div class="example">
        	<div></div><div></div><div></div>
        </div>
    </body>
</html>

第三种方法:

将结束标签与下一个开始标签写在一起，这样，他们之间的空格也会被清除掉

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .example div{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    	<div class="example">
        	<div></div><!--
        --><div></div><!--
        --><div></div>
        </div>
    </body>
</html>

第四种方法：

将元素结束标签的”>“放在下一行的开始处

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .example div{
                width: 100px;
                height: 100px;
                background: red;
                display: inline-block;
            }
        </style>
    </head>
    <body>
    	<div class="example">
    	<div>

        </div
        ><div>

        </div
        ><div>

        </div>
        </div>
    </body>
</html>