跨度上的填充覆盖其他元素

Question

假设这个html / css代码：

tr, td {
  border: solid 1px black;
}
table {
  border-collapse: collapse;
}
#x {
  border: solid 1px black;
  padding: 10px;
  background: green;
}

<table>
  <tr>
    <td>X</td>
    <td>Y</td>
  </tr>
</table>
<span id="x">
  totosss
</span>

为什么表格上的绿色跨度重叠以及如何避免这种行为？

Answer 1

这是因为内联元素中的填充不像行高。如果将内联元素更改为内联块或块元素，则它可以按预期工作

＆＃13;

＆＃13;

tr, td {
  border: solid 1px black;
}
table {
  border-collapse: collapse;
}
#x {
  border: solid 1px black;
  padding: 10px;
  background: green; 
  display: inline-block;
}

＆＃13;

<table>
  <tr>
    <td>X</td>
    <td>Y</td>
  </tr>
</table>
<span id="x">
  totosss
</span>

＆＃13;

＆＃13;

＆＃13;