How CSS Increasing line spacing between select box elements

Question

I would like to increase line spacing between select box elements.

I try line-height and min-height but this does affect the select box elements spacing.

Which property can I use?

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

Here I have 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;
}

Here I have 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

If you want spacing in elements of select box then apply css on elements not on select box.

Select box element is <option>

Use this css

select option { 
    line-height: 20px;
}

Answer 2

For ' select ' elements using ' size ' attribute (size greater than 0) try using padding on the options:

<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>