this post was submitted on 14 Jul 2024
20 points (91.7% liked)

CSS

492 readers
1 users here now

founded 1 year ago
MODERATORS
 

Hi,

No matter what I try


<style>
.FlexColumn {display: flex;flex-flow: column nowrap }
</style>

<div class="FlexColumn">
	<div>X</div>
	<div>X</div>
	<div>X</div>
	<div>X</div>
	<div>X</div>
</div>
<!-- I tried many CSS trick here... -->
<div>
   <span>X</span><br><span>X</span><br><span>X</span><br><span>X</span>
</div>

I always get a vertical gap between the characters !

Any ideas ?

Thanks.

you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 10 points 4 months ago (1 children)

Your issue is not with css, it's with typographical https://en.wikipedia.org/wiki/Leading. You can get rid of that gap with negative margin or with line-height and but it would reduce readability.

It might look okayish with your example with just letters 'X', but if you try it with any diacritic letters (like https://en.wikipedia.org/wiki/%C3%84) , the lines would overlap and the text would be unreadable.

[–] [email protected] 6 points 4 months ago

πŸ‘† Sometimes the best solution is to just let it be. It’s better to adapt your design to fit the technology, than it is to fit the technology to your design.