CSS

462 readers

1 users here now

founded 1 year ago

MODERATORS

Ategon@programming.dev

tappyturtle@programming.dev

How remove vertical gap between characters ? (programming.dev)

submitted 2 months ago by SpongeB0B@programming.dev to c/css@programming.dev

10 comments fedilink hide all child comments

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

[–] SpongeB0B@programming.dev 4 points 2 months ago* (last edited 2 months ago) (1 children)

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.

[–] dohpaz42@lemmy.world 4 points 1 month ago

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. 😊