欢迎来到 jackNEss'窝窝
I like simple mind

去掉 inline-block 元素之间的空隙

2011年08月22日

去掉 inline-block 元素之间的空隙

inline-block的适用范围其实很广泛,例如在遇到下面途中布局的时候:

在这里的需求是 元素蓝色元素里面的高度不确定,要求做到 这些模块在页面上居中显示,并且垂直居中。处理这个的时候,我们就需要用到 inline-block了

现代的浏览器都支持inline-block,只有IE6、IE7不支持 inline-block,不过可以通过样式 display:inline; zoom:1;进行模拟;

以下是 inline-block的兼容代码:

.box{display:inline-block; *display:inline; *zoom:1;}

接着是完成以上功能的未经debug的初级代码部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>去除inline-block之间的空隙</title>
<style type="text/css">
*{ margin:0; padding:0;}
.boxArea{ margin-top:50px;  text-align:center;}
.box{ 
	display:inline-block; 
	*display:inline; 
	*zoom:1; 
	margin-left:1px;
	width:100px; 
	padding:10px;
	vertical-align:middle;
	text-align:left;
	background:#def5ff; 
}
</style>
</head>

<body>

<div class="boxArea">
	<div class="box">欢迎来到 jackNEss 的博客</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你,哈哈</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你,哈哈,没错</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你,哈哈,没错,是用来凑字数的</div>
</div>

</body>
</html>

然后,在使用 inline-block去完成这个功能模块的时候,有没有发现,在firefox,safari,opera,chrome,ie8+中 inline-block 元素之间会灵异地多出了 3px的间距:

其实这个是换行符,如果将liline-block元素之间的换行符去掉,这3px的间距就会消失了。

有没有在不影响代码美观的情况下去掉这3px的间距呢,答案是有的。可以在inline-block的父级元素中加上 font-size:0;然后在 inline-block元素上把字体大小设回来就ok了

以下是 经过调试完成的 完整代码

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>去除inline-block之间的空隙</title>
<style type="text/css">
*{ margin:0; padding:0;}
.boxArea{ margin-top:50px; font-size:0;  text-align:center;}
.box{ 
	display:inline-block; 
	*display:inline; 
	*zoom:1; 
	font-size:12px;
	margin-left:1px;
	width:100px; 
	padding:10px;
	vertical-align:middle;
	text-align:left;
	background:#def5ff; 
}
</style>
</head>

<body>

<div class="boxArea">
	<div class="box">欢迎来到 jackNEss 的博客</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你,哈哈</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你,哈哈,没错</div>
	<div class="box">欢迎来到 jackNEss 的博客,诚心诚意欢迎你,哈哈,没错,是用来凑字数的</div>
</div>

</body>
</html>
分类bug整理
阅读 1,332
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS