搜索栏必须用 display: flex + gap 实现可靠间距，gap 仅作用于直系子元素；Safari ≤14.4 需拆分为 row-gap/column-gap；首尾留白靠 padding，图标需为直系子项且设 flex: none。
gap 不能直接用在搜索栏内部的输入框和按钮上——除非它们是同一 flex/grid 容器的直系子元素。 常见错误是给 <input> 加 margin-right、再给 <button></button> 加 margin-left，结果换行时错位、响应式下间距突变、IE 或旧 Safari 中完全失效。
搜索栏必须用 display: flex + gap 才可靠
搜索栏典型结构是输入框 + 按钮（可能还有清空图标、下拉箭头），这些元素需包裹在一个容器里，并启用 Flex 布局：
- 父容器必须设
display: flex，不能是inline-block或block - 子元素不能设
flex-shrink: 0且内容过宽，否则间隙会被“挤没” - 若按钮需要固定宽度（如 48px）、输入框占满剩余空间，用
flex: 1而非width: 100% - 换行支持？加
flex-wrap: wrap并配row-gap，但搜索栏通常不换行，可省略
示例：
.search-bar {
display: flex;
gap: 8px;
}
.search-bar input {
flex: 1;
min-width: 0; /* 防止 flex item 最小宽度撑开容器 */
}
.search-bar button {
flex: none;
width: 48px;
}Safari 14.0 及更早版本 gap 失效？拆成 row-gap 和 column-gap
真机调试时发现搜索栏按钮紧贴输入框？大概率是 Safari ≤14.4 静默忽略 gap: 8px。它只认分开声明的两个属性：
立即学习“前端免费学习笔记（深入）”；
- 等距场景：写
row-gap: 8px; column-gap: 8px;，别写gap: 8px - 如果只想要水平间距（比如按钮在右侧），写
row-gap: 0; column-gap: 8px; -
-webkit-gap在 Safari 14.0 中也无效，别加前缀白费力气 - DevTools 的 Computed 面板里查不到
gap值，就说明被跳过了
首尾留白不是 gap 的事，得靠 padding
gap 只控制子项之间，不管容器边缘。搜索栏左右贴边？那是容器自己的内边距没设：
- 统一用 CSS 变量控制：比如
padding: 0 var(--space-md); - 避免混用：
padding-left: 12px+gap: 8px+margin-right: 16px—— 逻辑割裂，后期改一个值要翻三处 - 移动端尤其注意：左右留白建议用
padding-inline: var(--space-md)，兼容性比padding-left/right更稳
带图标或下拉的复合搜索栏怎么配 gap？
当搜索栏含清空按钮（×）、语音图标、下拉箭头时，所有可交互子元素都应是 flex 容器的直系子项：
- 不要用
position: absolute把图标盖在输入框上——它脱离文档流，gap对它无效 - 图标类元素统一设
flex: none，避免参与伸缩计算 - 多个图标并排？确保它们都在同一层级，别嵌套在另一个
<div> 里——<code>gap不穿透 DOM 层级 - 清空按钮常需 hover 显示，用
opacity: 0+pointer-events: none控制，别用display: none，否则它不参与gap计算
真正难的不是让四个元素等距，而是当设计稿要求“移动端图标间距减半、PC 端保持不变”时，得意识到 gap 是容器级属性——必须用媒体查询单独调 column-gap，而不是试图给每个图标加 class 去改 margin。
