display运用与理解

display：规定元素应该生成的框的类型

以下是一些关于display比较常用的属性值：

值	描述
none	元素不会显示
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
line-block	行内块元素。（CSS2.1 新增的值）[IE6/7不支持]
list-item	此元素会作为列表显示。
inline-table	此元素会作为内联表格来显示（类似 table），表格前后没有换行符。
table	此元素会作为块级表格来显示（类似 table），表格前后带有换行符。
table-row	此元素会作为一个表格行显示（类似 tr）。
table-cell	此元素会作为一个表格单元格显示（类似 td 和 th）.
inherit	规定应该从父元素继承 display 属性的值。

---

display较为常用的还是block\inline\inline-block，我就这几个属性值做一下对比，有一些是自己用到的理解，可能不太正确。

display：block
1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度；
2. block元素可以设置width、height属性，块级元素即使设置了宽度，仍然是独占一行
3. block元素可以设置margin和padding属性

display：inline
1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化
2. inline元素设置width、height属性无效
3. inline元素的margin和padding属性，水平方向的padding-left、padding-right、margin-left、margin-right都产生边距效果；但竖直方向的padding-top、padding-bottom、margin-top、margin-bottom不会产生边距效果

display：inline-block
1. 将对象呈现为inline对象，但是对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

---

在使用display：inline-block的时候发现元素间具有空隙

<div class="ver">
    <img src="../images/1.jpg" class="ima">
    <img src="../images/1.jpg" class="ima">
    <img src="../images/1.jpg" class="ima">
    <img src="../images/1.jpg" class="ima">
    <img src="../images/1.jpg" class="ima">
</div>

.ver{
    background: #C46868;  
    line-height: 300px; 
    display: inline-block;
}

刚开始看到这个问题的时候简直抓毛啊，后来查了一下材料，发现只要运用font-size：0就能让空隙消失，具体为什么我还没懂。

.ver{
    background: #C46868;  
    line-height: 300px; 
    font-size: 0;
    display: inline-block;
}