To remove space between a inline element like , Is flexbox the only and better option or can we use something else?

Question

For Ex: The below flexbox code will remove the space between two span. But is there any other better option?

#remove_space {
  display: flex;
  flex-direction: row;
  align-content: flex-start;
}

span {
  padding: 0px;
  margin: 0px;
}

<section id="remove_space">
  <span>Hello</span>
  <span>All</span>
</section>

HI Shivam, welcome to Stack Overflow. I'd like to know why you want to remove the space? That would explain your use case and give us something to dig around. — Armen Michaeli, Apr 14 '21 at 08:03
I am new to frontend and was just curious to know possible ways. — Shivam Bhatia, Apr 14 '21 at 08:09
I think this has been [answered](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-inline-block-elements) already — Sameer, Apr 14 '21 at 08:20

score -1 · Answer 1 · answered Apr 14 '21 at 08:11

-1

You can try this:

<section id="remove_space">
  <span>Hello</span><span>All</span>
</section>

or

span {
  float:left;
}

I hope it will help you

answered Apr 14 '21 at 08:11

r1ddler

178
6

score -1 · Answer 2 · edited Apr 14 '21 at 08:20

I don't see other solutions than with flexbox to properly fix your problem.

For your code, try using classes instead of ids, this can avoid some problems if you have more than one "space remove" block in your page.

You can also remove this part, because flex-direction's default value is already set to row, and the default value for align-content is stretch, wich keep the height and width constraints :

flex-direction: row;
align-content: flex-start;

To remove space between a inline element like , Is flexbox the only and better option or can we use something else?

2 Answers2