Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
为什么设置 span 元素的 display 属性为 inline-block 会影响父元素 的高度？_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

为什么设置 span 元素的 display 属性为 inline-block 会影响父元素 的高度？

程序猿 • • 用户投稿

为什么设置 span 元素的 display 属性为 inline-block 会影响父元素 的高度？

内联元素对父元素高度的影响：inline-bl%ignore_a_1%ck 与 inline

在下面的 html 代码段中：

如果将 span 元素的 display 属性设置为 inline-block，父元素

的高度会变为 30px。如果将 span 元素的 display 属性设置为 inline，父元素

的高度则会变为 0。

这是为什么？

inline-block

当 display 属性设置为 inline-block 时，span 元素会成为一个块级元素，它具有固定的高度和宽度，由元素的内容决定。块级元素会创建自己的行框盒子，因此父元素

的高度会被扩展到与 span 元素的高度相匹配。

inline

话袋AI笔记 话袋AI笔记

话袋AI笔记, 像聊天一样随时随地记录每一个想法，打造属于你的个人知识库，成为你的外挂大脑

话袋AI笔记 195 查看详情 话袋AI笔记

当 display 属性设置为 inline 时，span 元素将作为一个行内元素。行内元素不会创建自己的行框盒子，而是内嵌在父元素的文本流中。由于 span 元素没有任何内容，因此它不会在文本流中占据任何空间，因此父元素

的高度也为 0。

原因是内联元素和块级元素在块级格式化上下文 (bfc) 和内联格式化上下文 (ifc) 中的行为不同。bfc 中的块级元素可以建立自己的高度和宽度，而 ifc 中的行内元素则不能。

理解这些概念将有助于你正确地处理 html 布局和样式问题。

以上就是为什么设置 span 元素的 display 属性为 inline-block 会影响父元素 的高度？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1156848.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
剪映怎么调色好看 剪映专业级调色参数详解
上一篇 2025年12月2日 21:11:01
《醉红楼》新服“百鬼夜行”，毕业宝石服今日火爆预热中！
下一篇 2025年12月2日 21:11:10

相关推荐

发表回复

登录后才能评论
关注微信