What is calculated value for font-size

Question

<div class="selection">
  <span class="myspan">Selam</span>
</div>

.selection{
  width:200px;
  font-size:18px;
}
.myspan{

  font-size:220%;
  display:block;
  width: 50%;

}

i have html and css as above. My question is: When the Css parsed is performed, is the "Calculated value" 50% or 39.6px for the font size(myspan)?

Answer 1

Your question is a little confusing, but I'll try to cover the details off as I think you're asking.

First, I think you mean the "Computed" value rather than the "Calculated" value. You also ask in a comment about the "Used" value, and to get a full picture we also need to cover some other values, the "Specified" value, the "Resolved" value and the "Actual" value.

Now taking the font-size first, we have for the .myspan element

• Specified value = 220%
• Computed value = 18px * 220% = 39.6px
• Resolved value = 39.6px
  (The resolved value for font-size is the computed value)
• Used value = 39.6px
  (Always the same as the computed value for font-size)
• Actual value = about 39-40px
  (The CSS pixels will be converted to device pixels. some other approximations may be made based on the available fonts and the closest renderable number on the device is used)

For the width, things work slightly differently

• Specified value = 50%
• Computed value = 50%
  (The pixel length is not known at computed value time because the layout hasn't happened at this step)
• Used value = 200px * 50% = 100px
  (The layout is done and the pixel value is determined)
• Resolved value = 100px
  (The resolved value for width is the used value)
• Actual value = about 100px
  (As with font-size, the CSS pixels will be converted to device pixels and the closest renderable number on the device is used)

---

Now, what causes confusion is that when you use getComputedStyle() in JavaScript, or inspect the "Computed Values" tab in the browsers' developer tools, you don't get the "Computed" values for the element - You get the "Resolved" values for the element.

For getComputedStyle(), this is just an historical anomaly that exists for backward compatibility reasons. Why the developer tools also report the Resolved value, I don't know.

Answer 2

The calculated value will be the parent font-size multiplied by the percentage you specified on the element (18px * 220%). In this case: 39.6px. Using percentage like this is basically the same as you set font-size: 2.2em on the child element.

The width will also apply the same calculation, resulting in 100px.