CSS padding overlapping parent element - html

Question

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;"> | </div>
<span style="color:#F87E20;">Export</span>
<div style="display:inline; color:#ACACAC;"> | </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?

Answer 1

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> | </div>
<span class="padded">Export</span>
<div> | </div>
<span>Delete</span>
</td>
</tr>
</tbody>
</table>
See also this article for more on this.