0

In some configuration, HTMLsselect` element shows an unwanted space on the bottom margin of the select element. It's a bit strange, as the margin shows only in certain circumstances like font-size is set to 16px, but on the other hand, it works perfectly cool for any other values.

I've tried to remove any styles from select and option elements. Still not works.

I've tried to increase the amount of options elements. And it has worked - when I have 3 options, there's no margin. When I have 2 options, the margin occurs.

I've tried to set select's font size to another than 16px - and it has worked. But I want it to be 16px.

The bug occurs only in Chrome though.

select {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  appearance: none;
  background-color: #fff;
  height: 32px;
  width: 54px;
  border: 1px solid #a2a2a2;
  border-radius: 3px;
  padding: 2px 10px;
}
<select>
  <option value="1">1</option>
  <option value="2">2</option>
</select>

I expect no unnecessary margins at my select element.

This is what I mean: enter image description here

Daniel Jackowiak
  • 21
  • 1
  • 6
  • 1
    Looking at your rendered snippet in a current Chrome, I have no idea what you mean. Could you post a screenshot that shows what the actual issue is? (Do you really _mean_ margin, as the word is used in a CSS sense - an _outer_ margin, keeping a distance to other elements?) – misorude Jul 31 '19 at 14:00
  • I think it's because the select element is an inline-block element by default. Therefore the font-size and line-height adds (in this case unwanted) whitespace.More info: https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements – SKeurentjes Jul 31 '19 at 14:07
  • @misorude I've just added it. – Daniel Jackowiak Jul 31 '19 at 14:10

0 Answers0