在CSS中，块级对象元素会单独占一行显示，多个block元素会各自新起一行。而内联对象元素前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。
使用display inline-block将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。
请大家先看display inline-block 实际应用中的效果
.my-test { width: 100%; height: 50px;}.my-test ul { }.my-test ul li { list-style: none; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}<div class="my-test"> <ul><li>1</li><li>2</li><li>3</li></ul></div>
增加display inline-block 样式
.my-test ul li { list-style: none; display: inline-block; vertical-align: middle; font-size: 12px; text-align: center; width: 20%; height: 100%; line-height: 50px; background: rgba(0,0,0,.4)}
这里有一个问题 ：
li之间出现了外边距
解决这个问题的办法有两种：
1.li元素之间不换行
<div class="my-test"><ul><li>1</li><li>2</li><li>3</li></ul></div>
如图，2和3之间未换行，外边距消失。
2.ul设置 font-size:0px;
如图，li之间的外边距都消失了。
继续思考 为什么li之间会出现外边距。
<div class="my-test"><ul id="ulid"><li>1</li><li>2</li><li>3</li></ul></div>
获取UL的子节点
可以看到，第一个li和第二个li之间有一个text的节点，而第二个li和第三个li之间并没有节点。
这里延伸出来新的问题 1.为何第一个text节点并没有导致第一个li出现外边距 2.text节点为何会导致出现外边距
关于第一个问题，猜测是因为浏览器自动帮忙处理了第一个节点，有知道原理的兄弟，请留言，拜谢。
第二个问题，text节点其实是一个回车，回车会被解析为一个空白符。空白符浏览器是作为一个半角空格来处理的。
.my-test ul {}<div class="my-test"><ul id="ulid"><li>1</li><li>2</li> <li>3</li></ul></div>
在2和3之间手动加入一个空格
出现了外边距
这也解释了为何设置font-size:0之后，间距会消失的情况。
