如何为select下拉框与首个option选项添加间距？

仅靠原生的<select>和<option>标签没办法实现你要的这种间距效果。

原因很简单：浏览器对原生下拉控件的样式有严格限制，<option>元素的margin和padding属性在大多数浏览器里都不支持上下方向的间距调整，就算写了CSS也不会生效——这是浏览器为了保持原生控件的一致性和交互体验做的限制，不同浏览器的表现还可能不一样。

你尝试的代码里，给disabled的option或者第一个option加margin/padding，本质上突破不了浏览器的原生样式限制。

如果一定要实现这种下拉框和选项之间的间距效果，只能放弃原生的<select>，改用HTML元素（比如div、ul、li）配合CSS和JavaScript来模拟自定义下拉组件，这样就能完全控制各个部分的间距和样式了。

附上你提供的尝试代码：

CSS 代码 #

select{
  margin-bottom: 1rem;
}
select option:disabled{
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}
#one{
  margin-top: 1rem;
  padding-top: 1rem;
 }

HTML 代码 #

<select name="select" id="select">
  <option value="" disabled selected hidden>Select box</option>
  <!--need a gap here-->
  <option id="one" value="option-one">Option 1</option>
  <option value="option-two">Option 2</option>
  <option value="option-three">Option 3</option>
</select>

内容的提问来源于stack exchange，提问作者Rocky Barua