display:block使span宽高生效，display:inline使div宽高及上下margin失效；inline下padding上下仍渲染但不影响行高，vertical-align仅对inline/inline-block有效。
display:block 和 display:inline 转换后宽高失效问题
把 <span> 用 display:block 变成块级元素后，原来设置的 width 和 height 会生效；但反过来，把 <div> 设为 display:inline，它原有的 width、height、margin-top、margin-bottom 全部失效——这是最常被忽略的「视觉断层」。
常见错误现象：<div style="width:200px;height:50px;background:red;">test</div> 加了 display:inline 后突然变窄、贴着文字挤在一起，不是 CSS 没生效，是行内模式根本不认这些属性。
-
display:inline下，padding-top/padding-bottom仍保留（内容会被撑开），但margin-top/margin-bottom完全无效 -
vertical-align在inline或inline-block场景下才起作用，block元素设了也没用 - 文字类块元素如
<p>、<h1>即使转成inline，也不能往里面塞<div>—— DOM 结构限制没解除，只是显示变了
行内块元素 inline-block 的空白缝隙问题
用 display:inline-block 让多个 <div> 横排时，HTML 换行或空格会被渲染成约 4px 的空白间隙，这不是 bug，是规范行为。很多人以为是 margin 或 padding 导致的，实际是文本节点的空格字符在起作用。
使用场景：导航菜单、图标组、按钮横向排列 —— 这时如果没处理空白，布局会错位、宽度计算不准。
立即学习“前端免费学习笔记（深入）”；
- 解决方法之一：父容器设
font-size: 0，子元素再重设font-size（注意继承影响） - 解决方法之二：HTML 中删掉元素间的换行和空格（可读性差，不推荐）
- 解决方法之三：用
float: left替代，但需清除浮动；或改用 Flex 布局（更现代，无此问题） -
vertical-align: top/middle/bottom必须显式设置，否则默认按 baseline 对齐，容易造成高度参差
语义与结构约束不能靠 display 绕过
display 只改视觉呈现，不改 HTML 内容模型规则。比如把 <a> 设为 display:block，它确实能占满一行、加 padding，但依然不能嵌套另一个 <a> —— 浏览器会静默截断或报错，DOM 树里第二个 <a> 直接消失。
同样，<p> 里写 <div>，哪怕 div 是 display:inline，HTML 验证器仍报错，部分浏览器解析时会自动闭合 <p>，导致结构意外断裂。
- 表单控件如
<input>、<button>默认是inline，但它们天生支持width/height，本质是 UA 样式里设了display:inline-block -
<img>是天然inline，但设display:block后，text-align:center在父容器上就失效了（得用margin:auto居中） - 不要依赖
float或position: absolute来“伪装”类型转换——它们会脱离文档流，带来新的布局副作用
兼容性与渲染差异点
IE8 及更早版本不支持 display:inline-block 对原生行内元素（如 <span>）生效，必须配合 zoom:1 触发 hasLayout 才能启用宽高控制。现代项目虽已不用兼容 IE8，但若维护老系统，这点仍要验。
另外，display: contents（移除自身盒模型）虽属新标准，但 Safari 15.4 之前不支持，且它会让元素失去 width/height 和所有盒模型属性，连 visibility:hidden 都不生效 —— 容易误用。
-
display: table-cell能让元素像表格单元格一样支持vertical-align，但会引入表格布局的隐含行为（如最小宽度、换行策略不同） - 用
display:flex或display:grid替代传统转换，逻辑更清晰，但要注意旧安卓 WebView 的兼容边界 - 所有
display值切换都会触发重排（reflow），高频操作（如 hover 动画）慎用block↔inline切换
display，而是写完之后，那个本该居中的按钮为什么偏了 2px，或者为什么移动端点击区域突然变小——这些细节藏在类型转换的边界里，而不是语法里。 
