title: Make em units relative to an ancestor that is not the parent
body: <p>Is it possible to make em units relative to say an outer paragraph element instead of it's immediate parent? Override the cascade?</p>
  
  <p>In the example below, the word <code>world</code>'s <code>font-size</code> will end up (1.5em x 1.2em x 1em) large.</p>
  
  <p>While maintaining the same html structure, can we somehow make it just (1.5em x 1em) large?</p>
  
  <pre><code>&lt;p style="font-size:1em;"&gt;
      &lt;span style="font-size:1.2em"&gt; Hello &lt;span style="font-size:1.5em"&gt;world&lt;/span&gt;. &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>In my case simply using <code>rem</code> units appears to be the best best. It's supported by IE 9+ (in addition to Chrome 4+, Firefox 3.6+, Opera 11.6+ and Safari 4.1+)</p>
  
  <p><code>rem</code> Represents the font-size of the root element (typically <code>&lt;html&gt;</code>). When used within the root element font-size, it represents its initial value (a common browser default is 16px, but user-defined preferences may modify this).</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/length#rem</a></p>
  
  <p><code>:root</code> Selects the root element of the document: <code>&lt;html&gt;</code> in the case of HTML</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:root" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/:root</a></p>
  
  <pre><code>/* css */
  :root {
      font-size: 1em;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;span style="font-size:1.2rem"&gt;
  
      Hello &lt;!-- this is 1.2em (relative to &lt;html&gt; root) --&gt;
  
      &lt;span style="font-size:1.5rem"&gt;world.&lt;/span&gt; &lt;!-- this is nested but still only 1.5em (relative to &lt;html&gt; root) --&gt;
  
  &lt;/span&gt;
  </code></pre>
  
  <p>Also using em units alone this could have been worked out with the css <code>calc()</code> function (which is also supported by IE 9+) and some javascript.</p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/calc</a></p>
  
  <p>Thank you everyone for your answers and help with this!</p>