1. 问题如下：
<div class="honor-wall">
<div class="user-info-l">勋章墙</div>
<a class="user-info-r user-honors" href="http://www.xx.com">
<img class="honor-icon" alt="user-honor-icon" src="[email protected]">
<span class="honor-title">魅力之王</span>
<span class="more_r"></span>
</a>
</div>
.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）