display:inline是css默认值，元素前后无换行符，不可设宽高，上下margin被忽略，仅左右padding/margin生效。
display: inline 是默认行为，不是“设置方式”——内联元素天生就是内联的，你什么都不做，它就已经 inline 了。
为什么给 span 加 width 或 height 没反应？
因为内联元素的宽高由内容决定，width 和 height 这两个 CSS 属性对 display: inline 元素完全无效。浏览器会直接忽略它们。
常见错误现象：
- 给
<span>文字</span>设置style="width: 200px; height: 40px; background: red;"，结果背景只包住“文字”，不撑开 - 用
margin-top想把a标签往上顶，发现没效果
原因很简单：内联元素只响应左右方向的 margin 和 padding，上下方向的 margin 被忽略；padding-top/padding-bottom 虽然生效（视觉上能看到填充），但不会影响周围行框（line box）的高度，也不会推开相邻元素。
什么时候该用 display: inline-block？
当你需要“并排显示 + 可控尺寸 + 可设上下边距”这三者同时成立时，inline-block 就是唯一合理选择。
典型使用场景：
- 导航菜单项（
<a></a>或<li>并排，每个有固定宽高和上下内边距） - 图片画廊中多个
<img>并列，且需统一高度/圆角/阴影 - 表单里
<label></label>和<input>左右对齐，又不想用 float 或 flex
注意坑点：
- HTML 源码里的换行或空格会被渲染为一个空格，导致
inline-block元素之间出现约 4px 的间隙 - 解决方法之一是把父容器的
font-size: 0，子元素再单独设字体大小 - IE6/7 不支持原生
inline-block，对块级元素需额外加zoom: 1触发 hasLayout
display: inline 和 display: inline-flex 能混用吗？
不能。把一个元素设为 inline-flex，它仍是内联级盒子（inline-level），但它内部子元素按 Flexbox 规则排列——此时它的 display 类型已不是传统意义上的“内联元素”，而是“内联弹性容器”。
关键区别：
-
inline元素只能包含文本或其它内联元素，嵌套<div> 会破坏语义且触发浏览器纠错（可能被拆行或包裹） <li> <code>inline-flex容器可以自由容纳块级子元素，比如在<span style="display: inline-flex"></span>里放<div>、<code><p></p>都没问题 - 但
inline-flex的兼容性比inline-block低（IE10+ 支持，IE9 及以下不支持）
所以除非你明确需要子项弹性布局，否则别为了“看起来像 inline”而强行用 inline-flex 替代 inline-block。
真正容易被忽略的细节
内联元素的垂直对齐（vertical-align）默认是 baseline，这个基线不是元素底部，而是字体的 baseline —— 所以一张图片和一段文字并排时，图片底边常会露出一截空白。这不是 bug，是规范行为。
如果你没显式设置 vertical-align，又看到奇怪的上下错位，先检查这个属性。最稳妥的兜底写法是：vertical-align: top 或 vertical-align: middle，尤其在混合使用 img、span、input 时。
