CSS 布局 - 显示：内联块
display: inline-block 值
相比 display: inline，主要的区别在于 display: inline-block 允许设置元素的宽度和高度。
此外， display: inline-block，顶部和底部的边距/填充均受尊重，但 display: inline 他们不是。
相比 display: block，主要的区别在于 display: inline-block 不会在元素后添加换行符，因此该元素可以位于其他元素旁边。
下面的例子展示了 display: inline, display: inline-block 和display: block:
例子
跨度.a {
display: inline; /* span 的默认设置 */
宽度：100px；
高度：100px；
填充：5px；
边框：1px 实心蓝色；
背景颜色：黄色；
}
跨度.b {
显示：内联块；
宽度：100px；
高度：100px；
填充：5px；
边框：1px 实心蓝色；
背景颜色：黄色；
}
跨度.c {
显示：块；
宽度：100px；
高度：100px；
填充：5px；
边框：1px 实心蓝色；
背景颜色：黄色；
}
亲自尝试 »
使用 inline-block 创建导航链接
一种常见用途 display: inline-block 是水平显示列表项，而不是垂直显示。以下示例创建水平导航链接：
