All geek questions in one place

If the <p> and <span> tags have the font size em, what is the actual height?

Design work in a browser using CSS. I know when the code code font-sizeset in a tag <span>is a relative block based on a tag <p>.

Study

From my searches, I was able to create a similar recent question from Nested <span>inside a tag <p>giving a different font size "that references CSS-Tricks :

"The em unit is a relative unit based on the calculated font size of the parent element. This means that the child elements always depend on their parent to set the font size."

But after the search, I could not execute the result:

Another similar question that I found, but do not answer what I am looking for:

Question

If you have HTML:

<p class="foo"><span class="bar">This month is March.</span></p>

With CSS:

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

What is the actual height of the font-sizetext This month is March.using the CSS font-sizeset to <p>and <span>?

I ask because I am interested to know the equation, if I need the same height without a tag <span>? Is there a formula for determining the final font size if <p>and tags <span>that have height?

+4
source share
3 answers

em , em .

0.833em * 0.8em = 0.6664em

Wether , . px , em, , .

.foo {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.833em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
.bar {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.8em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}

.bar2 {
    font-family:"Proxima Nova Rg", sans-serif;
    font-size:0.6664em;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
<p class="foo"><span class="bar">This month is March.</span></p>
<span class="bar2">This month is March.</span>
Hide result
+3

An em - , . , em .

<p> 83,3% . <span> 80%, 66,64%.

, 16px, html. , :

16 * 0.833 * 0.8 = 10.6624

11px.

, <body>, . , . .

+2

. .

The font size is span 0.8em, therefore 0.8 * X, where Xis the font size of the paragraph.

A paragraph is also 0.8em, therefore 0.8 * Y, where Yis the font size of the parent paragraph element. There is no information about what font size is in the question.

This makes the font size span 0.8 * 0.8 * Yor0.64 * Y

0
source

Source: https://habr.com/ru/post/1671901/

More articles:


All Articles