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

最新推荐文章于 2021-05-17 13:32:04 发布

小星star

最新推荐文章于 2021-05-17 13:32:04 发布

阅读量6.3k

点赞数 3

分类专栏：前端基础文章标签： html 解决方法边距问题

本文链接：https://blog.csdn.net/qq_40154925/article/details/77964507

版权

前端基础专栏收录该内容

7 篇文章 1 订阅

订阅专栏

当我们将一个元素的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: #f00;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
    </body>
</html>

这里写图片描述

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

其实，很简单，作为程序员，都会有一个习惯，就是写一行代码换一行，这是为了让我们的代码可读性更高。其实，正是因为这个换行，导致了这个间隔的出现。写到这，相信很多童鞋都会有一个解决方法了，那就是不换行就行了呗，但是呢，不换行又会导致我们的代码可读性降低。

所以，我统计了几种解决方法：

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

<!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了
代码如下：

<!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>

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

<!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>

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

<!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的边距问题就讲到这，其实，网上也还有更多其它的方法，个人觉得还是这几种方法最好，因为它们仅仅是改变html，兼容问题也不用考虑。

如果还有其它更好的方法，欢迎分享。

小星star

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
简述inline-block的边距问题及解决方法

当我们讲一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使你使用（margin:0;padding:0;）也是无法消除的。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style typ
复制链接

扫一扫

专栏目录