不同的跨度和输入填充

Question

我想知道为什么跨度和输入具有不同的填充，即使我将其设置为相同。它在 Firefox 和 Chrome 中的行为相同。哪个 CSS 规则会影响这个？

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

Answer 1

line-height不影响跨度，因为默认情况下，它是“内联”并且输入是内联块。所以如果你设置跨度display: inline-block它应该可以工作

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