最新消息:2014,为梦想加油,专注于前端开发!

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

未分类 admin 1375浏览 0评论
文章目录
[隐藏]


在做页面时候我们会采用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

转载请注明:专注于web前端开发 » 浅谈display:inline-block及解决空白间距

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址