当前位置：首页 → 问答吧 → 为什么inline-block元素之间有空隙？

为什么inline-block元素之间有空隙？

时间：2010-11-02

来源：互联网

尝试用display:inline-block模拟两列布局时，发现两个display:inline-block之间存在一定的空隙，firefox下面是8px chrome下是5px IE8下是4px IE6、7在hack模拟inline-block时没有空隙。
请问为什么两个元素之间会产生空隙，这个空隙大小如何控制？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>两列固定宽度</title> <style type="text/css"> *{ margin:0; padding:0; } #primary{ width:600px; height:300px; background:#41BEF1; display:inline-block; *display:inline; zoom:1; } #secondary{ width:300px; height:300px; background:#2B77BC; display:inline-block; *display:inline; zoom:1; } </style> </head> <body> <div id="primary"></div> <div id="secondary"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: friskfly 发布时间: 2010-11-02

参考了一下http://www.xlnv.net/Article/base/201001/942.html，大概了解了。
还好这个属性用的不是很频繁，用float更方便些。
写在一行就不会有空隙了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>两列固定宽度</title> <style type="text/css"> *{ margin:0; padding:0; } #primary{ width:600px; height:300px; background:#41BEF1; display:inline-block; *display:inline; zoom:1; } #secondary{ width:300px; height:300px; background:#2B77BC; display:inline-block; *display:inline; zoom:1; } </style> </head> <body> <div id="primary"></div><div id="secondary"></div> </body> </html>
提示：您可以先修改部分代码再运行

作者: friskfly 发布时间: 2010-11-02

为什么inline-block元素之间有空隙？

热门阅读

热门下载