How to avoid spaces when wrapping markup across mu

问题:

friends. I'm using atom to write html codes. Every time I input the word "p", it can generate 3-line codes automatically:

<p>

</p>

now I give a inline class to put two p elements in one line:

.inline {
  display:inline-block;
 }

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

I want it shows "Hi, friends" in browser, but it shows "Hi, friend s" with a space between "friend" and "s". I know the problem is that html treats a line-break as a space.So if I write the code as <p class="inline">Hi, friend</p><p class="inline">s</p>, then I can get the result I want. So I have two questions:

1. Can I avoid the needless space when write codes in multiple lines?（I tried to search on the web, only get the answer "No": Advanced HTML multiline formatting - removing not need spaces from new lines）
2. If No.1 can't, can I autocomplete the p element in only one line as <p></p> while using atom?(Actually, after autocomplete the codes, I can use Ctrl+J to join two lines. However, this only works for two lines(not 3 or more) and will change original line-break into a space)

Waiting for answers sincerely. Thanks.

回答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;
}

回答2:

Try display:table-cell - like this:

.inline {
  display: table-cell;
}

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

回答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.