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

来源：互联网发布：osi网络模型编辑：程序博客网时间：2024/06/09 19:12

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>

这里写图片描述

有其它方法的欢迎补充，有错误的地方请指正

（完）

阅读全文

0 0