首页 > 代码库 > 设置display:inline-block产生间隙

设置display:inline-block产生间隙

2024-09-02 09:15:41   220人阅读

display:inline-block产生间隙，是由于换行在内的空白符

display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
     .layout
{
  width: 750px;
  margin: 150px auto 0 auto;
  background: #cccccc;
  font-size: 0;

}
.layout2
{
  width: 250px;
  display: inline-block;
  *display: inline;;
  *zoom:1;
   font-size: 20px;

  background: #666666;
  text-align: center;
}
    </style>
</head>
<body>

<div class="layout">
  <div class="layout2">
    1
  </div>
  <div class="layout2" >
    2
  </div>
  <div class="layout2">
    3
  </div>
</div>
</body>
</html>

2.也可以写成
   <div class="layout2">
   1
   </div><!--            
--><div class="layout2">
   2
   </div><!--            
--><div class="layout2">
   3
   </div>

display:inline-block引发的间隙思考

作者：贤心最后编辑：2014年05月13日
 

 

一、导火线

没错，总有一类属性在助你轻松寻得捷径的同时，也可为你增添烦劳，比如本文的主谋display:inline-block。众前端们所诸知，其作用是将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。然而不幸的是，它并没有得到所有浏览器的支持，比如ie6、7和古老一点的firefox完全无视它，由于firefox的老版本几乎已经从市场中消失，所以名义上firefox是支持display:inline-block的，除此之外，伟大的chrome、Opera、Safari都能很好地支持。尽管如此，依然还是可以通过hack的手段让ie6、7两位难兄难弟变得温顺，比如像这样：

  •  
    •  
  •  
    •  
  •  
  •  
    •  
  •  
    •  
  •  
<ul class="demo01">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
代码laycode - v1.1
.demo01{width:327px; margin:0 auto;}
.demo01 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999;}
  1. 1
  2. 2
  3. 3
代码laycode - v1.1

需要解释的是，display:inline-block在IE下仅仅是触发了layout，而它本是行布局，触发后，块元素依然还是行布局。所以需让块元素呈递为内联对象，display:inline则起到了这一作用（*号只被ie6、7所识别），然后再通过zoom:1触发layout。即可实现所谓的inline-block。但事情远远没有结束，这个家伙面临多项后事需要您来处理，比如会默认有外边距(ie6、7除外)。而在这一问题之前，你也许需要放松一下，来看看下面这样一个现象。

二、是什么引发了间隙

上面提到，尽管inline-block默认会存在间隙，那么当我们试图对其中的某一个元素单独设置margin-bottom或者padding-bottom时（当然你也可以试着设置margin-top或者padding-top），它会呈现以下模型：

技术分享

技术分享

这意味着什么？ 我们可以借助vertical-align:top;这个属性来消除垂直间隙。

如此多奇异性让我们对css充满着好奇与不解，也许正因为如此才让浮动式布局成为主流。在文中的第一部分提到：inline-block允许空格，这是否又意味着什么？在一番剖析之后，我们惊奇地得出了答案：罪魁祸首是包括换行在内的空白符。

于是我们立马消除空格、换行等家伙，结果验证了这种推断的正确性。但这并不是好的解决方案，因为在复杂的html组合体之间，我们很难避免出现换行之类的空格。解铃还需系铃人，css引发的现象，理应由css本身来解决不是吗。

三、最终的统一

也许??嗦得太多不一定是好事，那么干脆看下我们所需要的最终模型吧！

  •  
    •  
  •  
    •  
  •  
  •  
    •  
  •  
    •  
  •  
.demo02{width:306px; margin:0 auto; font-size:0;}
.demo02 li{display:inline-block; *display:inline; *zoom:1; width:100px; height:30px; border:1px solid #848484; background-color:#999; vertical-align:top; font-size:12px;}
  1. 1
  2. 2
  3. 3
代码laycode - v1.1

让这一问题得到握手的，是font-size:0; 他的作用便是让多余的空白符消失，当然这会造成所有子元素的文本都一同消失，因此你需要再在子元素加一个font-size:12px。

贤心 写于2013.4.4

设置display:inline-block产生间隙


联系
我们