I would like to know why the span and input have different padding even if I set it the same. It behaves the same in Firefox and Chrome. Which CSS rule affects this?
span, input {
font-family: sans-serif;
font-size: 11pt;
font-weight: 400;
line-height: 16pt;
padding: 15px;
border: 1px solid black;
}
<span>Some text</span>
<input type="text">
CodePudding user response:
line-height
doesn't affect span because it is "inline" by default and input is inline-block by default. So if you set for span display: inline-block
it should work
span, input {
font-family: sans-serif;
font-size: 11pt;
font-weight: 400;
line-height: 16pt;
padding: 15px;
border: 1px solid black;
display: inline-block; /* << here */
}
<span>Some text</span>
<input type="text">