display默认inline和block-inline的区别

1、display的默认情况:inline(元素和其他元素都在一行上)

特点是:

设置宽度、高度无效

设置行高(line-height)会增加顶部和底部的间距但内容区高度不变

设置padding有效

设置margin-left、margin-right有效

设置margin-top、margin-bottom无效

验证一下:

高宽实际无效
支持所有padding,左右margin

2、display设置为inline-block将元素变为内联元素,但是元素的内容作为块元素呈递。旁边的内联元素会被呈递在同一行内。

特点是:

可以设置宽度高度行高

可以设置padding

可以设置marign

可以设置border

验证一下:

边框、宽高、内外边距都是支持的


黄色是margin,红色是border,绿色是padding
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容