本文详解为何 `display: inline` 会导致宽高失效，并通过改用 `inline-block` 让渐变小方块正常渲染，同时提供完整可运行的 css+html 示例与关键注意事项。

在网页布局中，常需在标题（如 <h1>）旁嵌入一个小型装饰性元素（例如带渐变背景的色块），但若直接将 <div> 放入 <h1> 内并设为 display: inline，会发现设置的 width 和 height 完全无效——该元素看似“消失”或仅显示为一条细线。根本原因在于：inline 元素不接受显式宽高声明，其尺寸由内容和字体行高决定，CSS 中的 width/height 对其无约束力。

要解决此问题，只需将 .myIcon 的 display 值从 inline 改为 inline-block：

.myIcon {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, red, orange, yellow);
  margin: 0;
  padding: 0;
  display: inline-block; /* ✅ 关键修复：支持宽高且保持行内流式布局 */
}

inline-block 兼具二者优势：既像 inline 元素一样参与文本流（不独占一行、可与文字并排），又像 block 元素一样完全支持 width、height、padding、margin 等盒模型属性。

html-to-pptx-converter

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

下载

完整可运行示例：

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  font-family: 'Arial', sans-serif; /* 注：'sticky notes' 非标准字体，建议回退 */
  font-weight: 500;
  height: 50px;
  background-image: linear-gradient(45deg, red, orange, yellow);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  padding: 0 16px; /* 调整 padding 避免文字被裁切 */
  text-align: center;
  line-height: 50px; /* 垂直居中文字 */
}

.myIcon {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, red, orange, yellow);
  display: inline-block;
  vertical-align: middle; /* 与文字垂直对齐 */
  margin-right: 8px; /* 可选：增加图标与文字间距 */
}
</style>
</head>
<body>
  <div class="headers">
    <h1><span class="myIcon"></span>STICKY NOTES</h1>
  </div>
</body>
</html>

⚠️ 注意事项：

• 避免在 <h1> 中嵌套 <div>：语义上 <h1> 应只包含短语级内容；推荐改用 <span>（更语义合规）或使用伪元素 ::before 实现图标。
• 字体回退：font-family: 'sticky notes' 非系统内置字体，需确保已通过 @font-face 加载，否则应添加通用字体回退（如 sans-serif）。
• 垂直对齐：添加 vertical-align: middle 可让小方块与文字基线对齐，提升视觉一致性。
• 响应式考虑：若需适配移动端，建议结合 em 或 rem 单位定义尺寸，或使用 clamp() 控制弹性大小。

总结：inline-block 是解决“内联元素需定宽高”场景的标准方案。理解显示模式（display）的本质差异，是精准控制布局的基础能力。