All geek questions in one place

Equal distance between text of different sizes in CSS

How can I get equal spacing between strings of different sizes using CSS? Here is my basic html:

<div style="font-size: 200%">A</div> <div style="font-size: 100%">B C</div> <div style="font-size: 50%">DE F</div> <div style="font-size: 25%">GH I</div>

I need the same spacing between each line, despite the different font sizes (i.e. the red arrows below should be equal). I cannot figure out how to do this using the CSS-height property.

enter image description here

+5
source share
6 answers

I think there are almost other answers, but the linear height is slightly different. The way I think about this is that the length of the string is the amount of center space. Therefore, if your line-height is 50 pixels, the space above it will be 25 pixels, and 25 times the space below the middle of the letter. This makes the 50px line high.

Thus, to make the space between them, I would use margin-bottom and set the line height to what it looks like as it goes down to the top and bottom of the letter (possibly depending on the font you are using). In my example below, I set the line height to .7 (you can see how it goes down to the actual baseline and the top height with a red border. Then I gave the margin value with rem units so that it is relative to the original page font size, not div itself with a unique font size.

 body { font-size: 24px; } div { line-height: .7; margin-bottom: 1rem; border: 1px solid red; } 
 <div style="font-size: 200%">A</div> <div style="font-size: 100%">B C</div> <div style="font-size: 50%">DE F</div> <div style="font-size: 25%">GH I</div>
+5
source

Use a fixed row height:

 div { line-height: 50px; }

Example:

 body { font-size: 24px; } div { line-height: 50px; border-bottom: 1px solid #f2f2f2; } 
 <div style="font-size: 200%">A</div> <div style="font-size: 100%">B C</div> <div style="font-size: 50%">DE F</div> <div style="font-size: 25%">GH I</div>
+3
source

Depending on the browsers you need to support, you can use the rem block, which is really powerful.

It uses the base font size of the document and uses multiplies it. Xample:

 body { font-size: 16px; } .large-font { font-size: 500%; margin-bottom: 10rem; /* this will be 160 pixels! */ } .tiny-font { font-size: 50%; margin-bottom: 10rem; /* this will still be 160 pixels! */ }

This is really flexible, because if you change the base font size: the fields will scale with it (while the pixel values ​​are fixed).

+2
source

Include line level restriction in the section of the HTML HTML document that addresses the body of the document, if that is what you are after or in a separate .css file, and include the source in the "" section.

 <html> <head> <style> body { line-height: 1.5; } </style> </head>

Mohammed Ashik (post above) voted for my answer for the cause of the unicorn. The code I wrote works as intended. If it weren’t

0
source

- EDIT -

The code below does not work. This is exactly what moobs did. I understand that I misunderstood. I returned the correct answer. Try this in the snippet that it works!

-

The trick is to use the line height as fixed for all font sizes, PROVIDED TO YOU TO CHOOSE A LINE HEIGHT MORE THAN A BIG FONT.

 p.small { line-height: 40px; } p.big { line-height: 40px; font-size: 30px; } p.too-big { line-height: 40px; font-size: 40px; } 
 <p class="small"> This is a paragraph with a smaller font </p> <p class="big"> This is a paragraph with a big font. </p> <p class="too-big"> This is a paragraph with a bigger font </p>

If you give the line height less than the largest font size, you are actually forcing the browser to display larger text in a smaller line. that's why you get different line heights for different sizes

0
source

The correct answer for this would be a simple calculation. All we need is to get an equal number of spaces. The spaces between the two lines contribute half of the line above and half of the next line. Therefore, if we are sure that each line contributes 10px, for example, above and below, except for the font size, we could achieve this. The code snippet will help you get the correct answer, because the selected answer will not work for several elements of the line.

 p{ vertical-align: top; padding:0px; margin:0px; } p.small { line-height: 40px; font-size: 20px; } p.big { line-height: 50px; font-size: 30px; } p.too-big { line-height: 60px; font-size: 40px; } 
 <p class="small"> This is a paragraph with a smaller font </p> <p class="big"> This is a paragraph with a big font. </p> <p class="too-big"> This is a paragraph with a bigger font </p>
0
source

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

More articles:


All Articles