div 空隙的解决办法

div 空隙的解决办法

div在用display: inline-block;时会出现莫名的空隙，

后来发现时标签后空格惹的祸

    <style>
       * {
            margin: 0;
            padding: 0;
        }   
        div {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0;
            padding: 0;
            border: 1px solid blue;
        }
        .div {
            display: inline;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

在这里插入图片描述
解决办法

第一种：
消除潜在的空格

    <style>
       * {
            margin: 0;
            padding: 0;
        }   
        div {
            display: block;
            width: 100px;
            height: 100px;
            margin: 0;
            padding: 0;
            border: 1px solid blue;
        }
        .div {
            display: inline;
        }
    </style>
</head>
<body>
    <div></div><div></div><div></div><div></div>
</body>

第二种
在父元素中设置 font-size:0;

    <style>
        * {
            margin: 0;
            padding: 0;
        }  
        body {
            font-size: 0;
        }
        div {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 0;
            padding: 0;
            border: 1px solid blue;
        }
        .div {
            display: inline;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

完成，
在这里插入图片描述

版权声明：本文为lxdhwz原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。