I need to reduce or alter the font size of parent class based on the font size of span tag inside child class

ThajudeenKT — Tue, 11 Jan 2022 09:42:48 +0000

<div class="heading">
  <p>Hero<br>
<span style="font-size:20px;">Banner</span><br>
Text</p>
</div>

.heading {
  font-size: 8.4rem;
  line-height: 7.56rem;
}

const elements = document.body.querySelectorAll("*[style]")
elements.forEach(element=>{
 if(element.style.fontSize){
   const {value: size, unit} = element.attributeStyleMap.get('font-size')
   element.attributeStyleMap.set('line-height', CSS[unit](Math.floor(size * (8.4/7.56))))
   }
   })

Here I can remove only the space below the span tag but not the space above the span tag. Please help to remove the same

DEV Community: ThajudeenKT

I need to reduce or alter the font size of parent class based on the font size of span tag inside child class