关于HTML块级元素与行内元素的深度解析_掌握display属性的基础逻辑-html教程-PHP中文网

因为span是内联元素（display: inline），其width、height、margin-top/bottom等属性被规范忽略；需改为display: inline-block（保持同行并支持宽高）或display: block（独占一行）才能生效。

关于html块级元素与行内元素的深度解析_掌握display属性的基础逻辑

为什么 `span` 设置 `width` 和 `height` 没效果？

因为 span 默认是 display: inline，行内元素的宽高由内容决定，CSS 中显式设置的 width、height、margin-top、margin-bottom 都会被忽略。这不是浏览器 bug，而是规范行为。

常见错误现象：给 <span>文字</span> 加了 style="width: 200px; height: 50px; background: red;"，结果背景只包住文字，没撑开。

真正生效的是 padding（上下左右都有效，但不会推挤相邻块级元素）
margin-left / margin-right 有效，margin-top / margin-bottom 无效
想让它有宽高，必须改 display：比如 display: inline-block 或 display: block

`display: inline-block` 为什么既不换行又能设宽高？

inline-block 是唯一同时继承 inline 排版逻辑和 block 盒模型控制能力的 display 值。它保留了“不强制换行、可并排”的特性，又允许你自由设置 width、height、所有方向的 margin 和 padding。

典型使用场景：导航菜单项、图标按钮组、响应式卡片网格（当不想用 flex/grid 时）。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

注意默认有空白间隙：相邻 inline-block 元素间会因 HTML 换行/空格产生约 4px 间隙，可用 font-size: 0 在父容器上消除，或改用注释剔除空白
它不自动填满父容器宽度，这点和 block 不同——inline-block 宽度默认由内容决定
在 IE8+ 完全支持，无需前缀；但旧版 IE6/7 需要触发 hasLayout（如加 zoom: 1）

什么时候该用 `display: block` 而不是 `display: inline-block`？

当你需要元素独占一行、撑满父容器、或作为布局容器（比如包裹多个子元素并统一控制 padding/margin），block 更直接可靠。强行用 inline-block 反而容易引入意外间隙或对齐问题。

常见误用：把 <div> 改成 <code>display: inline-block 只为让它横向排列，却忘了清除间隙、处理垂直对齐（默认 baseline 对齐，可能造成底部留白）。

block 元素天然适合做结构容器：<header></header>、<section></section>、自定义 <div class="card"> <li>若需横向排列多个 <code>block 元素，优先考虑 display: flex 或 float（已过时但仍有遗留场景），而非硬套 inline-block
vertical-align 对 block 无效，但对 inline-block 有效——这点常被忽略，导致元素错位

`display` 切换后，哪些 CSS 属性会“突然生效”或“失效”？

display 值变更本质是切换盒模型类型，直接影响属性是否参与渲染计算。这不是“启用/禁用”，而是浏览器根据 display 类型决定是否读取该属性值。

例如把 <span></span> 设为 display: block 后：width、height、margin-top、margin-bottom 立刻起效；但若设为 display: table-cell，margin 又全部失效（table-cell 不支持 margin）。

display: inline → margin-top/bottom 失效，vertical-align 生效
display: block → vertical-align 失效，margin 全方向生效
display: inline-block → margin 和 vertical-align 都生效，但要注意 baseline 对齐带来的高度偏差
所有 display 类型都支持 padding，但 inline 的上下 padding 不会撑开父容器行高（仅视觉填充）