display: block和display: inline的区别

最新推荐文章于 2025-04-22 10:43:27 发布

csdn_zcq

最新推荐文章于 2025-04-22 10:43:27 发布

阅读量491

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/csdn_zcq/article/details/86689851

版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文详细对比了块级元素（display:block）与内联元素（display:inline）在网页布局中的特性差异，包括margin、padding、width、height等属性的应用效果，以及white-space、vertical-align、line-height等属性的有效性，帮助读者更好地掌握CSS布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

display:block

1.处于常规流中，width没有设置会自动填满父容器
2.margin，pading生效
3.高度没有设置的情况下，会被处于常规流中的子元素撑开
4.vertical-align无效

display:inline

1.margin、padding在竖直方向无效，水平方向有效
2.width、height对display:inline元素无效，对于inline-block元素有效，常见的inline-block有img、input
3.white-space，vertical-align有效
4.行框高由line-height决定
6.浮动，绝对定位会使得元素自动变成块状元素