How To Avoid Spaces When Wrapping Markup Across Multiple Lines

friends. I'm using atom to write html codes. Every time I input the word 'p', it can generate 3-line codes automatically: now I give a inline class to put two p elements in one li

Solution 1:

Hi you can remove white space, see my fiddle here

you can do this by keeping in one line like this

<p>Hi, friend</p><p>s</p>

p{
    margin: 0;
    display: inline;
}

or by this method

<div class="parent1">
  <p>Hi, friend</p>
  <p>s</p>
</div>

p{
    margin: 0;
    display: inline;
}
.parent1 { 
    font-size: 0;
}
.parent1 p {
    font-size: 16px;
}

Solution 2:

Try display:table-cell - like this:

.inline {
  display: table-cell;
}

<p class="inline">
  Hi, friend
</p>
<p class="inline">
  s
</p>

Solution 3:

Final edit:

This answer was wrong and I know it is wrong. I'm leaving it for posterity because some of the information below is still useful.

---

Edit: forget everything I wrote below-- the problem is just that your CSS is set to display as inline-block, not inline.

.inline {
    /*display:inline-block;*/
    display: inline;
 }

---

Check out this post:

How to remove the space between inline-block elements?

This is known, expected behavior for inline-block elements. And it's not just the space because of the new line in the element-- it happens even if they are on the same line, like so:

<p class="inline">Hi, friend</p>
<p class="inline">s</p>

There are known techniques for handling this behavior (see here and here -- none of it is super pretty, but it's the reality of the situation.

To summarize the above links, they are basically means of trying to remove the spaces in the editor in ways that aren't super hideous or painful My preferred method is commenting out the spaces, like so:

   <p class="inline">Hi, friend</p><!--
--><p class="inline">s</p> 

...but it's really up to preference.

Alternately, you can leverage other options like floats or flexbox to achieve what you are looking for.