Question

我的HTML：

<table style="width:100%;">
    <tbody>
        <tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;">
            <td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;">
                <span style="color:#F87E20;">Copy</span>
                <div style="display:inline; color:#ACACAC;">&nbsp;|&nbsp;</div>
                <span style="color:#F87E20;">Export</span>
                <div style="display:inline; color:#ACACAC;">&nbsp;|&nbsp;</div>
                <span style="color:#F87E20;">Delete</span>
            </td>
        </tr>
    </tbody>
</table>

结果：

这一切都很好，并且工作得非常好。不过，我想进行一些QOL更改，在查看我想要做的一些更改时，遇到了令我困惑的事情。

整个行都是可点击的，以及Copy，Export和Delete跨度。当我尝试点击Export时，这会成为一个问题，但会错过2或3个像素，而是远离此区域。我想让跨度的可点击区域更大，所以我给了一个样式属性：padding:10px 0px 10px 0px;

填充按预期工作，扩大跨度周围的可点击区域，使其更容易点击它们。然而，我期待填充也会使整行更高，但相反，它就好像跨度一样。填充只是流过父级的填充。

以下是一些有助于解释这种情况的图片：家长：

和孩子：

我不明白为什么孩子的衬垫在它的容器外面流动，我不想在这个方向继续前进而不了解它的去向上。我想知道是否有人可以帮助我理解这里发生了什么？

Answer 1

您的span是内联元素。如果是内联元素，则忽略顶部和底部填充。默认情况下，span是内联的，div是阻止的。但是，您始终可以使用display: block;或display: inline;覆盖这些内容。块元素（也是内联块）具有完整的填充支持。参见：

table {
  width: 100%;
  border-bottom: 1px solid #ACACAC;
}

tr {
  cursor: pointer;
  height: 60px;
}

td {
  text-align: right;
  vertical-align: middle;
  padding: 10px 10px 10px 0px;
  background-color: #e0c000;
}

span {
  display: inline-block;
  color: #F87E20;
  background-color: #f0e000;
}

.padded {
  padding: 10px 0 10px;
}

div {
  display: inline;
  color: #ACACAC;
}

<table>
  <tbody>
    <tr>
      <td>
        <span>Copy</span>
        <div>&nbsp;|&nbsp;</div>
        <span class="padded">Export</span>
        <div>&nbsp;|&nbsp;</div>
        <span>Delete</span>
      </td>
    </tr>
  </tbody>
</table>

有关详情，请参阅this article。

CSS填充重叠父元素

1 个答案: