浅谈display:inline-block及解决空白间距

admin查看全部>> 02-18

人气 1,309

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!

文章目录
[隐藏]


在做页面时候我们会采用display:inline-block;来代替float进行布局,但是在标准浏览器中会有4px像素边距。下面我们来看下如何解决这个问题:

HTML 代码

CSS 代码

效果图:

在标准浏览器下查看以上代码,明显的可以看出,在inline-block的元素之间存在“4px”的空白,从上面的代码我们很难发现产生“空白间隙”的问题。其实这个问题是我们写代码的习惯所造成的。平时我们写代码,为了使代码看上去“层级分明”,通常会在标签结束符后顺手打个回车,而回车会产生回车符,回车符相当于空白符,通常情况下,多个连续的空白符会合并成一个空白符,而产生“空白间隙”的真正原因就是这个让我们并不怎么注意的空白符。

既然我们已经知道产生问题的原因了,那么就很好解决该问题。空白符也是字符,只要是字符就会联想到字体,字体大小之类的。只需要将父级设置font-size:0;即可。但是在safari还是有边距,我们可以通过改变letter-spacing和word-spacing值来达到兼容safari浏览。

全兼容的样式解决方法

css代码:

html代码:

此方法为最佳方法,笔者也经常采用。请注意父级设置如下代码 letter-spacing: -4px; word-spacing: -4px; font-size: 0; 子级设置 font-size:16px; letter-spacing:normal; white-space:normal; display: inline-block; *display: inline; *zoom: 1; 一定要设置字体大小,不然就看不到文字了。

效果图:

关于inline-block更多详细介绍可以查看:http://www.hujuntao.com/web/css/inline-block-elements-the-4px-blank-gap-solution.html

标签
相关作品
浅谈display:inline-block及解决空白间距:等您坐沙发呢!



会员登陆还没有账号 立即注册

用户登录

忘记密码 ?

用第三方帐号直接登录

微博账号登陆 QQ账号登陆