How to inherit height in html with js or jquery

I have an <em> tag and I have tags inside it. One of the span tags inside this has a height of 45 and this em tag has a height of 41. What I wan’t to do is inherit whatever height the tags (the children tags) inside this em have and assign it to this em tag. In this case the em tag should be 45 in height and not 41. Because that’s the biggest height value from the tags inside.

What I did was with jquery tried to add overflow inherit and height inherit, but it doesn’t work. Any help on how can one achieve such thing would be highly appreciated! Thank you!

    $("em[data-algorithm-type='formula']").css( {'overflow': 'inherit'});
    $("em[data-algorithm-type='formula']").css( {'height': 'inherit'});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title></title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

  <em class="js-match" data-algorithm-type="formula" style="background-color: rgb(0, 231, 255); color: rgb(0, 0, 0); overflow: inherit;">
    <formula>
      <span class="MathJax_Preview" style="color: inherit; display: none;"></span>
      <span id="MathJax-Element-48-Frame" class="mjx-chtml MathJax_CHTML" style="font-size: 118%; position: relative;" role="presentation">d=√(x₁ – x₂)² + (y₁ – y₂)²</span>
  </formula></em>
  
</body>
</html>

Answer

The following will fix line-height:

$("em[data-algorithm-type='formula']").css( {'display': 'inline-block'});

Advertisement

Answer