inline-block是什么意思

display: inline-block; 这个东西困扰了我好久。不知道反正我在中文网站上没有找到让我一下子醒悟过来的解释。偶然间读到这篇英文，我觉得简短的几句话，把问题解释的很清楚。 就像我开始的时候不明白clear：both，但是有人告诉我说是“清除浮动造成的影响”一样， 一下子就幡然醒悟了。

原文：http://www.impressivewebs.com/inline-block/

如果你已经使用CSS做过一段时间的开发，相信你对display: inline-block一定不陌生．它最主要的用在IE6中消除float元素的双边距。简单的解释一下，如果你给一个浮动元素与之浮动的方向相同的方向一个margin,　则这个元素的边距会加倍。如果你对这个bug很熟悉，你可以有两种方法消除它，　一是通过hack只给一半的margin, 二是给这个元素display: inline-block; display: inline。　当然如果你对inline-break足够的理解，　除了这个用处以外，它还可以用在很多场合。

怎么给inline-break下一个定义呢？看看别人怎么说：

According to Sitepoint’s CSS Reference:

inline-break 使该元素产生一个展示出来像inline一样的block box.(有点晕)

According to QuirksMode:

inline-block 像inline一样放置(比如和它相邻的元素处在同一行)，像block一样表现。

According to Robert Nyman:

通常来说，inline-break是inline元素，但是保留了block的一些特性，比如，可以设置高宽内外边距等。　

我个人认为Robert Nyman的解释最好，因为它更具有实践意义。

你可以尝试一下这段代码，

<span>This is a span here<span style="display: inline-block; border: solid red 1px; height: 70px; ">This is a<br />inline-block<br />element</span> This is a span here.</span>

效果：

什么场景下是用inline-block?

1. 修正ie6中浮动元素的双边距问题；
2. 水平放置多个类似block的元素而不需要用float;
3. 使一个inline元素具有高宽边距等而它依然能够保持inline;

需要注意的问题

inline-block一些很重要的因素和缺点需要牢记在心。inline-block对相邻的空格敏感，所以如果你要使用inline-block水平排列一些元素，比如一个导航条，你需要想办法不让这种事情发生。　办法一：像这样书写li:

<ul> 
<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>  

办法二：ul的font-size=0。

如果你一排放置多个高度不一的inline-block元素，你需要通过vertical-align来设置他们的垂直对齐方式。

是否跨浏览器？

inline-block可以在除了ie6/7以外的所有浏览器上工作的很好。但是针对ie6/7可以通过这种方式hack:

{

display: inline-block;

*display: inline-block;

zoom: 1;

}

我的一些实践：

<ul class="u1">
<li>
<h4>This is the title</h4>
<img src="mm1.jpg" />

</li>
<li>
<h4>This is the title</h4>
<img src="mm2.jpg" />

</li>
<li>
<h4>This is the title</h4>
<img src="mm3.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm4.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm5.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm6.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm7.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm8.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm9.jpg" />

</li><li>
<h4>This is the title</h4>
<img src="mm10.jpg" />

</li>
</ul>

.u1{
list-style: none;
}

.u1 li{
display: inline-block;
width: 150px;
vertical-align: top;
}