CODEWITHSUNDEEP
htmlcss
M. Volf
M. Volf

Reputation: 1472

Adjust font-size relatively to original value

Is it possible to adjust font-size (or any other css value) inline relatively to the original value specified in external styles sheet? Like so that the first paragraph in the fiddle would actually be 3em * 110% = 3.3em, not 1.1em like it is now.

p.a {
  font-size: 3em;
}
<p class="a" style="font-size: 110%">
  adjusted text
</p>
<p class="a">
  normal text
</p>

Upvotes: 0

Views: 284

Answers (1)

Kevin Reamer
Kevin Reamer

Reputation: 51

One option is using calc to multiply the font size: 

p.a {
  font-size: 3em;
}
<p class="a" style="font-size: calc(110% * 3)">
  adjusted text
</p>
<p class="a">
  normal text
</p>

The second option is to use the em font size value of the common parent element as the multiplier and set the em font size values of the children elements as if 1em = 100% so 1.1em would equal 110%: 

.parent {
  font-size: 3em;
}

p.a {
  font-size: 1em;
}
<div class="parent">
  <p class="a" style="font-size: 1.1em">
    adjusted text
  </p>
  <p class="a">
    normal text
  </p>
</div>

Upvotes: 1

Related Questions