行内元素与块级元素的核心区别在于默认布局行为和语义角色：行内元素（如）是文本流中的“零件”，不换行、宽高由内容决定、垂直margin无效；块级元素（如）是页面结构的“容器”，独占一行、可设宽高及全方向边距。
行内元素和块级元素的核心区别不在“能不能设宽高”，而在默认布局行为和语义角色——前者是文本流中的“零件”，后者是页面结构里的“容器”。
为什么 <span></span> 不能直接用 margin-top 推开上边的元素？
因为 <span></span> 是行内元素，它的 margin-top 和 margin-bottom 在标准盒模型中不参与垂直方向的布局计算。浏览器会忽略它们，只响应 margin-left 和 margin-right。
- 常见错误现象：给
<span></span>加了margin-top: 20px，但视觉上毫无变化 - 真正起作用的是
vertical-align（比如设为top或middle），它影响的是该元素在当前行框（line box）里的对齐位置 - 如果确实需要上下留白，要么换用
<div>，要么加 <code>display: inline-block—— 后者会让margin-top/bottom生效，但要注意引入空格间隙问题<img alt="HTML面试题行内块级区别_html面试题行内元素块级元素【汇总】" >明明是行内元素，为什么能设width和height？因为
<img alt="HTML面试题行内块级区别_html面试题行内元素块级元素【汇总】" >属于“可替换元素（replaced element）”，它的内容由外部资源（如 src 指向的图片文件）决定，浏览器会为其生成一个固有尺寸的渲染框，所以 CSS 的width/height可以直接缩放这个框。
Wechat Article Html下载将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 不是所有行内元素都这样：
<span></span>、<a></a>就不行；<input>和<button></button>也属于可替换元素，同样支持宽高 - 兼容性注意：老版本 IE 对
inline状态下<img alt="HTML面试题行内块级区别_html面试题行内元素块级元素【汇总】" >的vertical-align默认值处理不同（baseline vs middle），常导致底部多出空白 - 性能提示：设置
width/height能避免重排（reflow），尤其在图片加载前就预留空间时很重要
什么时候必须用
display: inline-block而不是display: block？当你需要多个元素水平排列、又想各自控制宽高/内外边距时，
display: inline-block是比浮动或 Flex 更轻量的方案——前提是能接受 HTML 源码换行带来的 4px 左右间隙。立即学习“前端免费学习笔记（深入）”；
- 典型场景：导航菜单项（
<li>里包<a></a>）、图标按钮组、评分星星 - 间隙来源：HTML 中的换行符和空格会被渲染为一个空白字符，等效于一个空格的宽度
- 消除方法之一：给父容器设
font-size: 0，再给子元素单独设回正常字号；更稳妥的是用注释或移除源码换行（但可读性下降） - 别误用：如果只是想让两个
<div> 并排，优先考虑 <code>display: flex，语义和控制力都更强真正容易被忽略的点是：行内/块级的“默认行为”只是初始渲染状态，CSS 的
display值可以随时覆盖它；但语义不会变——<p></p>永远表示一段文本，哪怕你把它设成inline，屏幕阅读器仍会按段落处理。
- 不是所有行内元素都这样：
