Home > Software design >  Different span and input padding
Different span and input padding

Time:08-18

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">

  • Related