去除inline-block元素间间距

最新推荐文章于 2020-04-30 17:06:04 发布

薛小强Forever

最新推荐文章于 2020-04-30 17:06:04 发布

阅读量434

点赞数

分类专栏：前端开发文章标签：行内块元素间隔间距

本文链接：https://blog.csdn.net/CSDN_XueXiaoQiang/article/details/70236610

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

问题描述

在水平排列的行内元素，元素之间会有一定的间隔，如图：
3个元素间会有间隔

代码：

<html>
<head>

<style type="text/css">
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}
</style>

</head>

<body>
<div class="space">
    <a href="##">A</a>
    <a href="##">B</a>
    <a href="##">C</a>
</div>
</body>

</html>

原因

元素间留白间隔的原因是标签段之间的空格，去掉HTML中的空格，间隔就没有了。

解决方法

第一种：去除HTML间的空格

<html>
<head>

<style type="text/css">
.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}
</style>

</head>

<body>
<div class="space">
    <a href="##">A
    </a><a href="##">B
    </a><a href="##">C
    </a>
</div>
</body>

</html>