Issue
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">
Solution
line-height
doesn't affect span because, by default, it is "inline" and input is inline-block. 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">
Answered By - Gicu Aftene
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.