display默认inline和block-inline的区别

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

特点是:

设置宽度、高度无效

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

设置padding有效

设置margin-left、margin-right有效

设置margin-top、margin-bottom无效

验证一下:

display默认inline和block-inline的区别_第1张图片
高宽实际无效
display默认inline和block-inline的区别_第2张图片
支持所有padding,左右margin

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

特点是:

可以设置宽度高度行高

可以设置padding

可以设置marign

可以设置border

验证一下:

display默认inline和block-inline的区别_第3张图片
边框、宽高、内外边距都是支持的


display默认inline和block-inline的区别_第4张图片
黄色是margin,红色是border,绿色是padding

你可能感兴趣的:(display默认inline和block-inline的区别)