本文详解为何 `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 等盒模型属性。
完整可运行示例：
<!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）的本质差异，是精准控制布局的基础能力。
