当为内联元素（如 `
`）设置 `width` 和 `height` 时，若其 `display` 值为 `inline`，这些尺寸属性将被忽略；需改用 `inline-block` 才能生效，并支持背景、边距等块级样式。
在 CSS 中，
默认是块级元素（display: block），但一旦被显式设为 display: inline，它就会遵循内联元素的渲染规则：无法设置宽高、上下 margin 和 padding 不影响布局流。这正是问题中 .myIcon 不显示的原因——尽管定义了 width: 20px; height: 20px; background: linear-gradient(...);，但 display: inline 让这些声明全部失效。
✅ 正确做法是使用 display: inline-block：
它既保持元素在行内排列（与文字/标题同行），又赋予其块级盒模型特性（可设宽高、padding、margin、背景等）。
以下是修正后的完整代码示例：
h1 {
font-family: 'sticky notes', sans-serif;
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: 43px 过大且破坏居中 */
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; /* 可选：添加图标与文字间距 */
}STICKY NOTES
⚠️ 注意事项：
- 推荐将 .myIcon 改为 （语义更合适），因为 在
内嵌套属于 HTML5 允许但非最佳实践； 更轻量且天然内联。
- padding: 43px 在
上会导致内容严重偏移，应移除或替换为 line-height + padding-inline 控制高度与内边距。
- vertical-align: middle 对 inline-block 元素至关重要，否则图标可能与文字底部对齐，视觉上“下沉”。
- 渐变背景在 inline-block 元素上完全可用，无需额外前缀（现代浏览器已原生支持 linear-gradient）。
总结：inline-block 是连接内联布局与块级控制的关键桥梁。掌握其行为，能灵活实现图标、徽章、标签等紧凑型 UI 组件，同时保持与文本的自然流式排布。
- padding: 43px 在
