CSS填充重叠父元素 [英] CSS padding overlapping parent element

问题描述

我的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;>复制< / span> 
< div style =display：inline; color：#ACACAC;>& nbsp; |& nbsp;< / div> 
 < div style =display：inline; color：#ACACAC;>& nbsp; |& nbsp;< / div> 
< span style =color：＃F87E20;>删除< / span> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

结果：

这很好，而且工作非常出色。尽管我想做一些QOL更改，但在研究我想要做的一些更改的同时，碰到了让我感到困惑的东西。

整行是可点击的，以及复制，导出和删除跨度。当我尝试点击导出时，这会成为问题，但是会丢失2或3个像素，而导航离开此区域。我希望使跨度的可点击区域更大，所以我给了一个样式属性，如下所示： padding：10px 0px 10px 0px;

填充按预期工作，扩大了跨度的可点击区域，使其更易于点击。然而，我期待的填充也使整个行更高，但相反，它就好像跨越的填充只是流过父母的填充。

这里是一些图像来帮助解释这种情况：
父母：

孩子：

我不明白为什么孩子的填充正在流出它的容器，我不想在不知道发生什么的情况下朝这个方向继续前进。

解决方案

您的 span 是否有人可以帮我理解这里发生的事情？ c $ c> s是内联元素。内联元素的顶部和底部填充被忽略。
默认情况下， span s是内嵌的，并且 div s是块。但是，您始终可以使用 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;颜色：＃F87E20; background-color：＃f0e000;}。padded {padding：10px 0 10px;} div {display：inline; color：#ACACAC;}

< table> < TBODY> < TR> < TD> <跨度>复制和LT; /跨度> < DIV>&安培; NBSP; |&安培; NBSP;< / DIV> < span class =padded>导出< / span> < DIV>&安培; NBSP; |&安培; NBSP;< / DIV> <跨度>删除< /跨度> < / TD> < / TR> < / tbody>< / table>

a href =https://stackoverflow.com/questions/33620139/padding-for-inline-elements>这篇文章为更多关于此。

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

The result:

This is all fine, and is working wonderfully. I want to make some QOL changes, though, and while looking into some of the changes I wanted to make, ran into something that is confusing me quite a bit.

The entire row is clickable, as well as the Copy, Export and Delete spans. This becomes a problem when I try to click on Export, but miss by 2 or 3 pixels, and instead navigate away from this area. I wanted to make the clickable area for the spans bigger, so I gave the a style property like so: padding:10px 0px 10px 0px;

The padding works as intended, enlarging the clickable area around the spans, making it easier to click on them. However, I was expecting the padding to also make the entire row taller, but instead it's as if the spans' padding is just flowing over the padding on the parent.

Here are some images to help explain the situation: Parent:

And Child:

I don't understand why the child's padding is flowing outside it's container, and I don't want to go on in this direction without understanding what's going on. I was wondering if anyone could please help me understand what's happening here?

解决方案

Your spans are inline elements. Top and bottom padding is ignored in case of inline elements. By default, spans are inline, and divs are block. However, you can always override these with display: block; or display: inline;. Block elements (also inline-blocks) have full padding support. See:

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>

See also this article for more on this.

这篇关于CSS填充重叠父元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！