title: Relative Line Height Not Cascading Down To <tables>
body: <p>I'm setting a global font-size and line-height on my <code>&lt;body&gt;</code> tag, so all default body copy is <code>14px</code> and a <code>1.3em</code> line-height.</p>
  <p>The problem is as I have tables that have a larger font-size, and instead of inheriting a relative line-height, it's taking the computed value from the <code>&lt;body&gt;</code> tag. As a result the text overlaps:</p>
  <p>Here is a code pen: <a href="https://codepen.io/thedigitalmc/pen/xxZJjyy" rel="nofollow noreferrer">https://codepen.io/thedigitalmc/pen/xxZJjyy</a></p>
  <pre><code>&lt;body&gt;
  &lt;style type=&quot;text/css&quot;&gt;
  body {
    font-size:13px;
    line-height:1.3em
  }
  
  td {
    font-size:30px
  }
  &lt;/style&gt;
  &lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;This Is Text&lt;br&gt;On Two Lines&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  <p>Is there a better way to do this, I don't really want to do <code>body * {line-height:1.3em}</code> but it seems the best solution.</p>