inline-block空隙怎么解决

方法一:移除空格

元素间留白间距出现的原因就是标签段之间的空格,因此,去掉HTML中的空格,自然间距就木有了。考虑到代码可读性,显然连成一行的写法是不可取的,我们可以:

<div class="space">
    <a href="##">
    惆怅</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

或者是:

<div class="space">
    <a href="##">惆怅</a
    ><a href="##">淡定</a
    ><a href="##">热血</a>
</div>

或者是借助HTML注释:

<div class="space">
    <a href="##">惆怅</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

 方法二:使用margin负值

.space a {
    display: inline-block;
    margin-right: -3px;
}

margin负值的大小与上下文的字体和文字大小相关,间距对应大小值可以参见“基于display:inline-block的列表布局

例如,对于12像素大小的上下文,Arial字体的margin负值为-3像素,Tahoma和Verdana就是-4像素,而Geneva为-6像素。

由于外部环境的不确定性,以及最后一个元素多出的父margin值等问题,这个方法不适合大规模使用。

方法三:让闭合标签吃胶囊

如下处理:

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血</a>
</div>

注意,为了向下兼容IE6/IE7等喝蒙牛长大的浏览器,最后一个列表的标签的结束(闭合)标签不能丢。

在HTML5中,我们直接:

<div class="space">
    <a href="##">惆怅
    <a href="##">淡定
    <a href="##">热血
</div>

方法四:使用font-size:0

如下处理:

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

这个方法,基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。不过有个浏览器,就是Chrome, 其默认有最小字体大小限制,因为,考虑到兼容性,我们还需要添加:

类似下面的代码:

.space {
    font-size: 0;
    -webkit-text-size-adjust:none;
}

方法五:使用letter-spacing

如下处理:

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

方法六:使用word-spacing

如下处理:

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

一个是字符间距(letter-spacing)一个是单词间距(word-spacing),大同小异。据我测试,word-spacing的负值只要大到一定程度,其兼容性上的差异就可以被忽略。因为,貌似,word-spacing即使负值很大,也不会发生重叠。

时间: 2024-10-12 16:30:18

inline-block空隙怎么解决的相关文章

CSS display:inline|block|inline-block差异

display:inline|block|inline-block三属性的区别和联系,block就是将元素显示为块级元素,inline就是将元素 显示为行内元素,CSS display:inline-block将对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行内,允许空格. 详解CSS display:inline|block|inline-block的区别 ◆CSS display:block CSS display:block就是将元素显示为块级元素. blo

网页制作中图片上下间为什么会有空隙?解决办法

尽管已经是老掉牙的东西了,而且IMG在html中出现空隙的老式浏览器好多已经一去不复返了,但还是要给大家普及一下原因及原理. 造成图片在IE下与容器下边界有空隙的原因 图片文字等inline元素默认是和父级元素的baseline对齐的,而baseline又和父级底边有一定距离(这个距离和 font-size,font-family 相关,不一定是 5px),所以设置 vertical-align:top/bottom/text-top/text-bottom 都可以避免这种情况出现.而且不光li

图片间有空隙的解决方法

定制页面时遇到图片间有空隙的问题,google: 在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下: 直接加样式img{vertical-align:bottom; display:block} 当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成top,可根据自己遇到的不同情况来设vertica

在HTML中图片拼接时,出现空隙的解决方法

我们经常会在html文档中拼接图片,但每两个图片中间都会有一点点空隙. 产生原因:图片默认基线对齐解决方法: 1.img{vartical-align:bottom} 2.img{display:block} 3.盛放图片的父容器margin-top:-1px;

inline block inline-block总结

一.block表示块级元素,其元素通常会单独成一块,独占一行: 二.inline表示内联元素,不会产生换行,其排版会在一行显示,直到一行被占满. 三.常见的块级元素有 DIV, FORM, TABLE, P, PRE, H1~H6, DL, OL, UL 等:常见的内联元素有 SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR        等. 四.一般使用display:block与display:inline来改变元素的

block循环饮用解决

在block中使用self会引起循环引用导致无法释放. 解决: __weak typeof(self) weakSelf = self; 例如: NSLog(@"init--> value:%@,address=%p,self=%p",self.person,self.person,self); myBlock1 = ^(void){     //这样不会造成循环引用     NSLog(@"execute1--> value:%@,address=%p,weak

inline,block,inline-block解析

display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div>, <p>, <h1>, <form>, <ul> 和 <li>是块元素的例子. display:inline就是将元素显示为行内元素. inline元素的特点是:  和其他元素都在一行上: 高,行高及顶和底边距不可改变: 宽度就是它的文字或图

display:inline/block/inline-block

display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-block; 就是在同一行内的块级元素. 说概念太模糊,来个真实案例吧. <a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">链接一</a><a href=&qu

inline-block元素的空隙与解决方法

多次遇到了使用inline-block后留下间隙的问题,所以记录一下,以提醒自己以后留意这点. 现象描述: 使用display:inlie-block后和一些行内元素都有此现象如:<a> <img><input>等标签元素 <div class="space"> <p></p> <p></p> <p></p> </div> .space p{ displa

两个div之间有空隙怎么解决(重置样式)

/* 盒模型中规定了垂直边界重叠,层之间有默认margin值,需要重置css样式 来源网址:http://meyerweb.com/eric/tools/css/reset/ css样式代码如下: */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,