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 的不同行为。代码如下:
span.a {
display: inline; /* span 的默认值 */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
display 的一种常见用法:inline-block 用于水平而不是垂直地显示列表项。
如果你发现错误或有其他见解,请给www.zhuei.com留言,我们会尽快更新本文!