title: CSS padding overlapping parent element
body: <p>My HTML:</p>
  
  <pre><code>&lt;table style="width:100%;"&gt;
      &lt;tbody&gt;
          &lt;tr style="cursor:pointer; border-bottom:1px solid #ACACAC; height:60px;"&gt;
              &lt;td style="text-align:right; vertical-align:middle; padding:10px 10px 10px 0px;"&gt;
                  &lt;span style="color:#F87E20;"&gt;Copy&lt;/span&gt;
                  &lt;div style="display:inline; color:#ACACAC;"&gt;&amp;nbsp;|&amp;nbsp;&lt;/div&gt;
                  &lt;span style="color:#F87E20;"&gt;Export&lt;/span&gt;
                  &lt;div style="display:inline; color:#ACACAC;"&gt;&amp;nbsp;|&amp;nbsp;&lt;/div&gt;
                  &lt;span style="color:#F87E20;"&gt;Delete&lt;/span&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The result:</p>
  
  <p><a href="https://i.stack.imgur.com/nKKxj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nKKxj.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>The entire row is clickable, as well as the <code>Copy</code>, <code>Export</code> and <code>Delete</code> spans. This becomes a problem when I try to click on <code>Export</code>, 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: <code>padding:10px 0px 10px 0px;</code></p>
  
  <p>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.</p>
  
  <p>Here are some images to help explain the situation:
  Parent:
  <a href="https://i.stack.imgur.com/xDNpy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xDNpy.png" alt="enter image description here"></a></p>
  
  <p>And Child:</p>
  
  <p><a href="https://i.stack.imgur.com/bhAct.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bhAct.png" alt="enter image description here"></a></p>
  
  <p>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?</p>