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.
👆 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.
ok I’ve found a work around
<style> .FlexColumn {display: flex;flex-flow: column nowrap } .FlexColumn > div {display: inline-block; margin: -4px 0} </style> <div class="FlexColumn"> <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.
My two cents: if you have to resort to negative numbers, it’s time to rethink things. It may work, but it’s kludgy and most likely not easily scalable. Take the extra effort and find the better (more correct) way to manage this issue. Not only will it be correct, and scalable, but I’m sure you’ll learn a lot along the way. It really is a win-win when you take your time. 😊
Why not just a single span or paragraph with <br>?
Removing the leading is possible with some tricks, but it is not recommendable, as it has it’s issues. Maybe you could tell us what you actually want to accomplish? Assuming that you are not stacking X’s for fun and entertainment…
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}@SpongeB0B Use text box trim it just landed in Chrome Canary https://caniuse.com/css-text-box-trim
