如何去除inline-block元素间间距

在写页面时,我们会用到各种元素,其中可以分为块级元素和行内元素,块级元素最直接的体现是和其它元素不在同一行内显示,是可以定义宽高的,比如h1/h2/h3等一系列标题标签,div标签,p标签等等都属于块级元素。而行内元素故名思议就是在同一行显示的,是没有宽高的元素,比如i标签,a标签,b标签,em标签等等都属于行内元素。

然而做实际应用中,我们还会发现介于块级和行内元素之间的另外一种:行内块级元素(inline-block),这种需要通过css的display的属性来设置,它既可以设置元素在同一行显示,又具备定义宽高。

但是在使用过程中会发现,两个inline-block元素之间会有一定的间距,默认情况下好像是7px,具体需要看他们父级元素的字体大小定义。那有什么办法可以去掉他们的间距呢?

假如是下面的html结构:

<div class="abc">
    <a href="">a</a>
    <a href="">b</a>
</div>

方法一:

.abc{
    display: inline-table;  //chrome
    word-spacing: -6px;
 }
a{
    word-spacing: 0;
    display: inline-block;*display: inline;*zoom: 1;
    font-size: 12px;padding: 10px;background: #c00;color: #fff;
}

方法二:

/*IE6/7浏览器有时候会有1像素的间距*/
.abc{
    height: 100px;
    font-size: 0;-webkit-text-size-adjust:none;
}
a{
    display: inline-block;*display: inline;*zoom: 1;
    font-size: 12px;padding: 10px;background: #c00;color: #fff;
}

方法三:

需要改html结构,直接把两个元素之间的空格和换行去掉:

<div class="abc">
    <a href="">a</a><a href="">b</a>
</div>


本文由 w3cmark_前端笔记 版权所有,转载时请注明出处。
注明出处格式:w3cmark (http://www.w3cmark.com/2016/499.html)

分享到:

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
关注w3cmark
微信公众号 w3cmark_com