当为元素添加 `box-shadow` 时，若其 `display` 属性在悬停前后发生变化（如从默认 `inline` 变为 `inline-block`），会导致布局重排，使下方内容跳动；解决方法是将 `display: inline-block` 提前声明在常态样式中，确保渲染流稳定。
这是典型的 CSS 布局抖动（layout shift）问题。HTML 中自定义标签 <butto> 默认为 inline 元素，而 inline 元素不支持 box-shadow 的视觉边界扩展（尽管部分浏览器会渲染，但会触发隐式格式化上下文变化）。当你在 :hover 中突然设置 display: inline-block，浏览器必须重新计算盒模型——包括尺寸、基线、行高及周围流式布局，从而导致下方 <p> 文本被“推下”，产生肉眼可见的位移。
✅ 正确做法：将 display: inline-block 提前写入常态样式（即非 hover 状态），使元素始终以 inline-block 参与文档流，后续仅改变 background-color 和 box-shadow 这类不影响几何尺寸的属性，即可彻底避免重排。
以下是修复后的完整代码示例：
butto {
border: none;
outline: none;
background-color: white;
padding: 2px;
cursor: default;
display: inline-block; /* ✅ 关键：提前声明，保持布局稳定 */
/* 可选：添加 vertical-align 避免基线对齐干扰 */
vertical-align: middle;
}
butto:hover {
background-color: #e3e3e3;
box-shadow: 2px 2px grey; /* 不再触发 display 变更，无位移 */
}
html {
background-color: black;
}<butto onclick="print()" class="no-print">Print</butto> <p style="color: white; margin-top: 8px;">Text below!</p>
⚠️ 注意事项：
- 自定义标签（如 <butto>）虽可工作，但不符合 HTML 标准，建议改用语义化标签（如 <button> 或 <span role="button">），并添加 type="button" 防止表单意外提交；
- 若需更精细控制阴影位置与空间占用，可搭配 transform: translateZ(0) 或 will-change: box-shadow 提升图层（非必需，仅用于复杂动画场景）；
- box-shadow 默认不占据文档流空间，但若元素本身未设定明确宽高或 inline 行内特性较强，仍可能因行框（line box）重绘引发微小偏移——此时 vertical-align 或包裹容器设置 line-height 可进一步稳定排版。
总结：布局稳定性源于样式变更的原子性。只要确保悬停前后元素的盒类型（display）、尺寸模型（box-sizing）、定位方式（position）等影响布局的属性保持一致，仅变更绘制属性（颜色、阴影、透明度、transform），就能实现丝滑、无跳动的交互效果。
