How to get current text size in css

Question

I am trying to write css which, for the whole line that I can add, will increase these lines by about 3px. I don’t know how I can do this, I think something like this:

.increaseSize {
getSize()+3px;
}

Can anybody help me?

Answer 1

I would like to look for a different and much simpler approach.

p.myText {
  font-size: 16px;
}

.increaseSize {
  font-size: 1.5em
}

<p class="myText">This is some standard text and <span class="increaseSize">this is a bigger font size text</span></p>

Run codeHide result

This will make the .increaseSize element 50% larger than its parent.

You can use the calc () function, but maybe browser compatibility is a problem. This is a safer solution.

Does this help you?

Answer 2

You can use it, as in the following example:

div {
  font-size: 1em;
}
span.increase {
  font-size: calc(100% + 3px);
}

<div>
  Hello <span class="increase">World</span>
</div>

Run codeHide result

% . calc ( ), 3px font-size.

font-size -. / , em, rem % font-size.

Answer 3

W3C

Em ( ), em .

em W3C.

1em . > 16 . , 1em 16px.

em : pixels/16 = em

h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}