CODEWITHSUNDEEP
htmlcss
Skytiger
Skytiger

Reputation: 1845

CSS padding overlapping parent element

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:

enter image description here

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: enter image description here

And Child:

enter image description here

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?

Upvotes: 4

Views: 11961

Answers (1)

terminus.technicus
terminus.technicus

Reputation: 190

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.

Upvotes: 4

Related Questions