您的位置：首页 > 其它

去除inline-block元素间间距

2017-04-19 09:10 260 查看

问题描述

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



代码：

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


结果：



第二种，使用margin负值，这里不做演示。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航