Why doesn't select's height add up from line-height and padding (2px less)?

Question

css

To change the height of fields and selects, I use the line-height and padding parameters. For inputs, the height is equal to the sum of the bottom and top padding, line-height and border thickness. But for some reason, the height is a few pixels less for the select. In the example, the same styles for these elements jsfiddle.net/jq9o7byn/4 , but the field has a height of 42px, and the select has 40px (I tested it in the latest version of chrome and mozilla). Why is that? What parameters of the select affect this?

Answer 1

Never thought about it. It's funny =)
What parameters affect the size of the select can be found in the documentation of the html-css standards.
www.w3.org/TR/css3-ui/#default-style-sheet

select[size]
{
/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
 display: inline-block;
 height: attr(size,em);
}

The bottom line is that line-height does not affect the height of the select, only the font size is taken for calculation.
For the same height, you need to specifically specify height: 40px
By the way, in firefox the height of the blocks is the same, in your example, the formula for calculating the height of the select is probably different in different browsers.
Hope it helped.