行盒的盒模型
行盒的盒模型
常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容沿伸
- 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
- 内边距(填充区)
水平方向有效,垂直方向不会实际占据空间。
- 边框
水平方向有效,垂直方向不会实际占据空间。
- 外边距
水平方向有效,垂直方向不会实际占据空间。
行块盒
display:inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
可替换元素:img、video、audio
绝大部分可替换元素均为行盒。
可替换元素类似于行块盒,盒模型中所有尺寸都有效。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体