简介
DISPLAY：INLINE-BLOCK 带来了一种新的方法来创建并排的框，这些框可以根据包含元素中的可用空间正确折叠和包装。它使以前使用浮动完成的布局更容易创建。不需要再清理花车了。
与Display：Inline相比，主要区别在于inline-block 允许设置元素的宽度和高度。此外，对于Display：内联、顶部和底部边距和填充不受影响，而对于Display：内联-块则不受影响。
现在，display：inline-block和display：block之间的区别在于，使用 display：block 时，在元素之后会出现一个换行符，因此block元素不会与其他元素相邻。以下是一些视觉示例：
显示：内联
请注意这里的宽度和高度是如何不受影响的，以及填充顶部和底部是如何存在的，但重叠在上下行上。
1span.box {
2 display: inline; /* the default for span */
3 width: 100px;
4 height: 160px;
5 padding: 18px;
6}
Cheese and wine ricotta danish fontina. Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio. Bavarian bergkase emmental fromage cheesecake cheese slices cheesy grin queso caerphilly.
显示：inline-block
这里考虑了宽度、高度和填充，但元素的两个副本仍然可以并排放置。
1span.box {
2 display: inline-block;
3 width: 100px;
4 height: 160px;
5 padding: 18px;
6}
Cheese and wine ricotta danish fontina. Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio. Bavarian bergkase emmental fromage cheesecake cheese slices cheesy grin queso caerphilly.
显示：分块
在这里，一切都受到尊重，但元素并不是并排坐在一起的。
1span.box {
2 display: block;
3 width: 100px;
4 height: 160px;
5 padding: 18px;
6}
Cheese and wine ricotta danish fontina. Brie cheesy grin paneer squirty cheese taleggio cheesecake goat taleggio goat taleggio. Bavarian bergkase emmental fromage cheesecake cheese slices cheesy grin queso caerphilly.