CSS 如何增加选择框元素之间的行距

Question

我想增加选择框元素之间的行距。

我尝试line-height和min-height但这确实会影响选择框元素的间距。

我可以使用哪个属性？

.input {
    padding-bottom:5px;
    margin-right:8px !important;
    margin:4px;
}

这里我有min-height ：

select, textarea {
    background: #eee;
    border: 1px solid #aaa;
    border-right-color: #ddd;
    border-bottom-color: #ddd;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    width: 100%;
    min-height: 30px;
    font-weight: normal;
}

这里我有line-height ：

select, textarea { 
    display: inline-block;
    height: 20px;
    padding: 4px 6px;
    margin-bottom: 5px;
    font-size: 12px;
    line-height: 20px;
    color: #555555;
    vertical-align: middle;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

Answer 1

如果您想要选择框元素的间距，则将 css 应用于不在选择框上的元素。

选择框元素是<option>

使用这个css

select option { 
    line-height: 20px;
}

Answer 2

对于使用“ size ”属性（大小大于0）的“ select ”元素，请尝试在选项上使用填充：

<select multiple>
    <option style="padding: 10px" value="1">Option 1</option>
    <option style="padding: 10px" value="2">Option 2</option>
    <option style="padding: 10px" value="3">Option 3</option>
    <option style="padding: 10px" value="4">Option 4</option>
</select>