CSS display:inline-block的边距问题及解决方法

甜心小宇yu丶

于 2020-05-22 17:32:20 发布

阅读量1.3k

点赞数 3

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

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

版权

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

摘要由CSDN通过智能技术生成

将一个元素的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>