inline-block 问题

1. 问题如下：

勋章墙

        
        魅力之王
        

.honor-title防止过长就加了超出用省略号显示的样式，如下：

display: inline-block;max-width: 4rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

样式是实现了，但发现.honor-title的父元素a标签的高度超出了，导致下面的行收到了影响，如下：

2. Inline-block没有内容时，仍有高度，而且有内容和没有内容时高度可能不一致

原因如下：

inline-block 
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box. 
inline 

This value causes an element to generate one or more inline boxes.

(来自 http://stackoverflow.com/questions/20106428/why-does-inline-block-cause-this-div-to-have-height)

> The most important part for this topic would be that the element itself get's formatted not just the content.

Every inline-block element will be seen as atomic inline-level box and thus take up space.

关键点是这个inline-block元素本身会被formatted，而不仅仅是content。每个inline-block元素都会没看做line-level的box，他们在他们自

己的inline formatting 上下文中被视为一个透明的box，所以会占据空间。对外层来说他是inline，所以外层div设置的font-size和

line-height，对其高度有影响。

3.同一行应用了inline-block 的元素之间有空隙，如下：

HTML代码：

1 <ul>
2     <li>首页li>
3     <li>关于li>
4     <li>热点li>
5     <li>联系我们li>
6 ul>

CSS代码

1 ul, li { padding: 0; margin: 0; list-style-type: none; }
2         li { display: inline-block; border: 1px solid #000; }

效果图

原因：在浏览器中，空白符是不会被浏览器忽略的，多个连续的空白符浏览器会自动将其合并成一个。我们编写代码时写的空格，换行都会产生空

白符。所以自然而然的两个元素之间会有空白符，如果将上述例子中的a标签写成一行，空白符消失，菜单之间也就紧凑起来了。

消除空隙：

要去除空白符产生的间隙，首先要理解空白符归根结底是个字符，通过设置font-size属性可以控制产生的间隙的大小。（font-size:0）