font size inherit is different in same div element-CodePudding

Hello I'm make a two span tag box and make a div tag in span tags

I know font-size style is inherit property

so I input font-size property in parents span tags

first span tag's div's font-size is same to parents font-size

but second span tag's div's font-size is different from parents

font-size

in safari, chrome's console window inherit is normal

but span2's div is parent font-size 1.3multiple

I 'm thinking span1 and span2 is same, but inherit is not same.

why span1 inherit is normal but span2 inherit is not normal?

code is in bottom and i'm apply the safari console window

<style>
#span1{
    font-size: 40px;
}
#span2{
    font-size: 40pt;
}
</style>
<body>
    <span id ="span1">
        <div>text</div>
    </span>
    <span id = "span2">
        <div>text</div>
    </span>
    </div>
    </div>
</body>

CodePudding user response：

Nope.

font-size: 40px and font-size: 40pt is not same.
1pt is 1.3281472327365 px, so 40px is about 53.33px. So your code worked correctly.

CodePudding user response：

im not really getting what your trying to achieve. The first span is 40px the second is 40pt (not px) and that is what is displayed. I changed the snippet to both 40px and removed the unnecessary div's at the end. Also if you want multiple texts with the same font-size you can use the same class/id multiple times.

-Noel

<style>
#span1{
    font-size: 40px;
}
#span2{
    font-size: 40px;
}
</style>
<body>
    <span id ="span1">
        <div>text</div>
    </span>
    <span id = "span2">
        <div>text</div>
    </span>
</body>