去除inline-block元素间间距
我们先来看一段代码
div{width:900px;}
div a{ display:inline-block; width:300px;}
<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>将代码执行之后我们会发现这个宽度为900的div居然放不下这三个宽度为300的a标签。原因在于他们之间有一个间隔。下面我来说一下如何去除这个水平间距和垂直间距。
1、可以在html中直接把元素写在一行上或把闭合标签和第二个开始标签写在一行或两行间添加注释或直接去掉闭合标签但最后一个不能去掉。
例如
div{width:900px;}
div a{ display:inline-block; width:300px;}
<div>
<a href=""></a
> <a href=""></a
><a href=""></a>
</div>2、设置margin-right为负值，但要考虑上下文的字体和文字大小。
3、先设定子元素字体，再设置父元素font-size:0px;////chrome中：-webkit-text-size-adjust:none;
例如
div{width:900px;font-size:0px;-webkit-text-size-adjust:none;}
div a{ display:inline-block; width:300px;font-size:12px;}
<div>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</div>4、设置父元素letter-spacing或word-spacing为负值，要考虑字体，子元素有文字也要注意设置letter-spacing或word-spacing的值。
5.float:left;
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2016-06-08，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读