question 1: I used line-height:0; on the input [type = text] button and didn"t get what it looks like using the same line height of 0 on ordinary span elements. Is there any feature of form elements like input,button that affects internal text positioning?
question 2: in chrome, there will be a deviation of 1 pixel between input and button in the vertical position. If vertical-align is set to middle, the outer frames of the two will be vertically aligned, but the vertical difference between the middle text will be 1 pixel (with the bottom edge of x as a reference)
want to know the nature of these two problems
the red line in the picture indicates the baseline alignment of the text, and the green line indicates the 1-pixel difference between input and button
this is true for problem 1 Chrome,firefox,Edge on PC, and question 2 only appears in Chrome
.related codes
< html lang= "zh" >
< head >
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title></title>
<style type="text/css">
.test{ padding:20px;}
.test>*{ display:inline-block; line-height:0; margin:0; padding:0; border:1px solid -sharpccc; -webkit-appearance:none; height:100px; background:-sharpeee; box-sizing: border-box; font-size:20px;}
</style> < / head >
< body >
<div class="test">
<span>xyz</span>
<input type="text" value="xyz"/>
<button>xyz</button>
</div> < / body >
< / html >