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.
line-height is the property you are looking for. Beware fucking with line-height is usually a bad idea, as characters can extend below or above the "line" and will collide.
Also maybe look at divitis, you might be suffering from it.
I love that word divitis
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.
ok I've found a work around
<div>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
<div>X</div>
</div>
But if someone have something more proper, I'm all ears.
Why not just a single span or paragraph with ?
maybe the line-height property is the thing you are looking for.
.FlexColumn {display: flex;flex-flow: column nowrap; line-height: 0.7 }
Sorry if this is a silly answer as i don't kbow css well, but have you removed the inherent styling that comes with the browser. I think you need to have a
* {magin: 0; padding: 0}