不推荐给加display: inline，因其破坏段落语义、丢失上下margin和height支持，且子内容仍按块级解析易致布局断裂；应优先用等语义中立元素，需控尺寸时改inline-block，复杂布局则用flex。
内联元素默认就同行排列，不需要额外设置；但想控制它们的对齐、间距或换行行为，就得靠 display: inline-block 或 flex，而不是盲目改 <p></p> 的 display 值。
为什么直接给 <p></p> 加 display: inline 不推荐
因为 <p></p> 是语义化段落标签，强制设为 inline 会丢失其块级语义，且无法设置 height、margin-top 等关键样式。更严重的是：浏览器仍可能按“块级上下文”解析它的子内容（比如里面嵌了 <div>），导致布局意外断裂。<p>常见错误现象：</p>
<ul>
<li>两个 <code><p></p> 并排后，第二段文字被挤到下一行，即使父容器很宽
margin-right 没反应，但 padding-right 却生效text-align: center 试图居中整个 <p></p>，结果只居中了内部文字真正该做的：用语义正确的内联容器替代，比如 <span></span> 或 <em></em>；若需尺寸控制，再套一层 display: inline-block。
display: inline-block 的实际使用边界
它不是万能胶——只在你需要“并排 + 可设宽高 + 可控上下边距”三者同时成立时才该用。比如导航项、图标+文字组合、小卡片组。
实操建议：
- 只对直接参与排列的元素设
display: inline-block，比如.nav-item，不要设在父容器上 - 务必加
vertical-align: top或middle，否则默认基线对齐会在下方留出约 4px 空隙 - 父容器若有空格/换行符，
inline-block元素间会多出 ~4px 间隙；解决方法不是删 HTML 换行，而是设父容器font-size: 0，再在子元素里重置font-size - 它天然支持流式换行：宽度不够时自动折行，无需媒体查询
响应式场景下更稳妥的选择是 display: flex
当你要做“同一行显示 + 居中对齐 + 自适应间距 + 小屏堆叠”，inline-block 就力不从心了。Flex 能统一处理这些需求，且兼容性已覆盖所有现代浏览器（包括 iOS Safari 12.2+ 和 Android Chrome 76+）。
典型写法：
.header-row {
display: flex;
align-items: center;
gap: 1rem;
}
.header-row > * {
flex-shrink: 0;
}
@media (max-width: 480px) {
.header-row {
flex-direction: column;
text-align: center;
}
}
注意点：
-
gap比手动设margin更干净，且不会影响首尾元素 -
flex-shrink: 0防止小屏下文字被压缩变形 - 别依赖
justify-content: space-between做等分布局——它在子元素数量变化时容易错位
最常被忽略的一点：内联元素的响应式不是靠“让它变小”，而是靠“控制它所在的上下文”。比如 <span></span> 内的文字是否换行，取决于其父容器的 white-space 和 width，而不是给 <span></span> 自己加 max-width。
