最简单有效的解法是给search input加padding-right并配合box-sizing: border-box，否则width: 100%下padding会撑大宽度；图标尺寸、边框、内边距及间隙需精确计算，推荐用em/rem响应式单位，background-image方案同样依赖padding-right预留空间。
search input右侧图标被遮挡或贴太近
直接加padding-right是最简单有效的解法，但必须配合box-sizing: border-box，否则 padding 会撑大整体宽度，破坏布局。很多同学只加 padding 却没改 box-sizing，结果输入框溢出容器或者和旁边元素错位。
- 默认
box-sizing是content-box，此时width: 100%不包含padding，加padding-right: 32px会让实际占用宽度变成100% + 32px - 图标通常用
::after伪元素或绝对定位的<i></i>，无论哪种，预留空间都得靠 input 自身的padding-right，而不是靠父容器 margin 或 icon 的 left 值硬推 - 如果图标是 SVG 或字体图标，注意其本身可能带默认 vertical-align（比如 baseline），导致视觉上偏下，这时要加
vertical-align: middle或设line-height: 1
padding-right该设多大才刚好不挤图标
数值取决于图标的宽高、边框、内边距以及你希望保留的视觉间隙。别凭感觉写20px或24px，先量图标容器的实际占位。
- 用浏览器开发者工具选中图标元素，看 computed 面板里的
width、padding-left/right、border，总和就是最小安全值 - 常见组合：16px 图标 + 8px 右侧间隙 = 至少
padding-right: 24px；若图标有padding: 4px和border: 1px，就得算进24px + 2×4px + 2×1px = 34px - 响应式场景下，图标尺寸会变（比如
font-size: 1.2rem），建议用em或rem单位，如padding-right: 2.5em，让间距随图标缩放
用background-image替代图标时padding-right还管用吗
管用，而且更稳——因为背景图不参与文档流，不会影响布局，padding-right就是唯一控制文字不盖住图标的手段。
- 设置
background: url(...) no-repeat right 50% / 16px 16px后，必须保证右边有足够空白，否则文字会顶到图标左侧 - 此时
padding-right要 ≥ 图标宽度 + 期望间隙，例如图标 16px 宽 + 6px 间隙 →padding-right: 22px - 避免用
background-position: right却不设padding-right，尤其在输入内容变长时，文字末尾会直接覆盖在图标上
移动端软键盘弹出后图标位置错乱
这不是padding-right的问题，而是 ios safari 对 fixed/absolute 元素 + 软键盘的渲染 bug，但错误预留空间会让问题更明显。
立即学习“前端免费学习笔记（深入）”；
- 确保图标容器（比如包裹 input 和 icon 的
<div>）没有<code>position: fixed或意外触发了新层叠上下文 - 不要依赖
right: 0把图标钉死在 input 右侧，改用padding-right+background或 flex 布局更可靠 - 如果用了
input[type="search"]，某些安卓浏览器会自带搜索图标，此时padding-right还要额外多留 12–16px，否则自定义图标和原生图标打架
事情说清了就结束。真正容易被忽略的，是 padding-right 的值必须和图标实际渲染尺寸对齐，而不是设计稿上的“看起来差不多”。