简述inline-block的边距问题及解决方法

时间 2019-12-05 标签简述 inline block 边距问题解决方法

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

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

那么，这个诡异的边距为何会出现呢？咱们先来了解一下它出现的原理。html

其实，很简单，做为程序员，都会有一个习惯，就是写一行代码换一行，这是为了让咱们的代码可读性更高。其实，正是由于这个换行，致使了这个间隔的出现。写到这，相信不少童鞋都会有一个解决方法了，那就是不换行就好了呗，可是呢，不换行又会致使咱们的代码可读性下降。程序员

因此，我统计了几种解决方法：web

第一种方法：就是大多数人都会想到的将要转换为inline-block的元素写在一块儿，不换行就好了，虽然这会使代码可读性下降，但这也不失为一种解决方法。
将以上代码修改成：svg

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

第二种方法：在要转换为inline-block的元素之间加入注释符，将换行注释掉就ok了
代码以下：spa

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

第三种方法：将结束标签与下一个开始标签写在一块儿，这样，他们之间的空格也会被清除掉，额，好像这样的可读性也不是过高。
代码以下：code

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

        </div><div>

        </div><div>

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

第四种方法：将元素结束标签的”>“放在下一行的开始处
代码：xml

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

        </div  ><div>

        </div  ><div>

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

四中方法的截图：
htm

那，inline-block的边距问题就讲到这，其实，网上也还有更多其它的方法，我的以为仍是这几种方法最好，由于它们仅仅是改变html，兼容问题也不用考虑。blog

若是还有其它更好的方法，欢迎分享。