去除inline-block元素间间距的几种方法

最新推荐文章于 2024-01-25 08:47:43 发布

aomize

最新推荐文章于 2024-01-25 08:47:43 发布

阅读量303

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/aomize/article/details/78220829

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

inline元素间间距

举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .box a{
            padding: .5em 1em;
            background-color: #cad5eb;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1</a> <a href="#">2</a> 
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
</body>
</html>

效果如下：

这里写图片描述

可以看出inline元素之间换行显示或空格分隔会造成间距

除此之外，inline-block元素之间也存在间距

再举个栗子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input type="text" name="" placeholder="请输入用户名">
    <input type="password" name="" placeholder="请输入密码"> <input type="email" name="" placeholder="请输入邮箱">
</body>
</html>

效果如下：

这里写图片描述

从图中可以看出inline-block元素之间换行显示或空格分隔会造成间距

解决方法

（1）减少闭合标签

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .box {
            margin-top: 50px;
        }
        .box a{
            padding: .5em 1em;
            background-color: #cad5eb;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1
        <a href="#">2
        <a href="#">3
        <a href="#">4</a>  <!--不要忘记闭合标签-->
    </div>
</body>
</html>

这里写图片描述

（2）设置margin值为负数

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .box {
            margin-top: 50px;
        }
        .box a{
            margin-right: -5px;    /*chrome浏览器环境下*/
            padding: .5em 1em;
            background-color: #cad5eb;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
</body>
</html>

这里写图片描述

（3）font-size: 0

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .box {
            font-size: 0;
            -webkit-text-size-adjust:none;  /*兼容性*/
        }
        .box a{
            font-size: 16px;   /*必须设置font-size,否则不显示a元素*/
            padding: .5em 1em;
            background-color: #cad5eb;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1</a> <a href="#">2</a> 
        <a href="#">3</a><a href="#">4</a>
    </div>
</body>
</html>

这里写图片描述

（4）letter-spacing

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .box {
            letter-spacing: -5px;   /*chrome浏览器环境下*/
        }
        .box a{
            letter-spacing: 0;
            padding: .5em 1em;
            background-color: #cad5eb;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1</a> 
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
</body>
</html>

这里写图片描述

（5）word-spacing

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        .box {
            word-spacing: -5px;
        }
        .box a{
            word-spacing: 0;
            padding: .5em 1em;
            background-color: #cad5eb;
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="#">1</a> 
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
    </div>
</body>
</html>