How to increase text size without changing its block size?

Question

css

When I increase the TEXT size, the height of the navbar also increases, thereby the text that is on the right is not fixed exactly along the line-height
How to increase the TEXT so that it does not increase the navbar?

Answer 1

jsfiddle.net/ecpdg45k

Answer 2

You can do this and limit the width, but this is not true, since the logo will be outside the field https://codepen.io/anon/pen/djGvxB like here.
You need to create a container with position: relative
and set the logo in it to position: absolute, then it will be attached to this block and will be knocked out of the flow, so it will not affect the size of other elements.
Also you can not limit the width.
And for example, set its minimum value ( 70 px ), for example, or 100.
The display is flex and centered, in which case you can increase the text of the logo to the borders of the container!

Answer 3

Set the text and other items to the same line-height. Perfectly solves the problem of line-height = the required height of the block, if there are such short paragraphs and no hyphenation is expected. If you are not using normalize or reset make sure there are no extra margins/paddings. When using flex, center height alignment shouldn't be a problem at all.