VueJS中如何在a-select和a-input-search元素之间添加空白间距

方案1：使用flex布局的gap属性（最推荐） #

父元素已经设置了display:flex，直接给父元素新增gap属性即可控制所有子元素之间的间距，不会额外增加元素的上下左右边距，也不需要单独给子元素加样式：

<a-col
  style="display: flex; gap: 12px;"
>
    <a-select
      ...
    >
      <a-select-option value="test">test1</a-select-option>     
      ...   
    </a-select>
    <a-input-search
      ....
    />
</a-col>

可以根据需求调整gap的数值，单位支持px/rem等，该属性兼容IE11以上所有主流浏览器。

方案2：给单个元素设置margin #

如果需要兼容更低版本的浏览器，可以给其中一个子元素加外边距实现间距效果：

• 给a-select加右侧外边距：

<a-select
  style="margin-right: 12px"
  ...
>

• 或者给a-input-search加左侧外边距：

<a-input-search
  style="margin-left: 12px"
  ...
/>

相关说明 #

你之前用	不生效是因为HTML渲染时会自动合并空白字符，单个制表符只会被渲染为极小的空格，无法达到预期的间距效果。如果自定义样式不生效，大概率是选择器优先级不足，或者scoped样式没有使用深度选择器命中antd组件的根元素，使用上述内联样式可以直接绕过优先级问题。

内容的提问来源于stack exchange，提问作者Konat Undoshy