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