How to avoid spaces when wrapping markup across multiple lines

Question

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 Hi, friends, then I can get the result I want. So I have two questions:

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）
If No.1 can't, can I autocomplete the p element in only one line as  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.

Not sure if this is your real use case, but remember that `
` indicates a paragraph. *Usually* if you're putting stuff all on the same line, you would want to use `` instead. — Brad, Oct 10 '16 at 04:09
@Brad Yes, you are right. I simplified my real use into this example, and in this case, if I write the codes `Hi, friend` and`s`in two lines, it will also create a blank space between `friend` and `s`. So is it possible to avoid the space while not writing the codes in only one line? — LoveMind, Oct 10 '16 at 05:35
After reading the answers, I think there is already a good solution for this case: [How to remove the space between inline-block elements?](http://stackoverflow.com/a/5078297/3643591). Thanks to @anied. — LoveMind, Oct 10 '16 at 13:14

score 0 · Answer 1 · edited May 23 '17 at 11:45

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.

Hi, thanks for your answer. I change "inline-block" to "inline", and it still doesn't work. Actually, when I use "inline-block" and write the codes in one line, it will show the result I want:`
Hi, friend
s
`. — LoveMind, Oct 10 '16 at 05:10
Yeah, I realized last night that I was on the wrong path, but wasn't able to delete the answer from the StackExchange app. — Alexander Nied, Oct 10 '16 at 13:21

score 0 · Answer 2 · answered Oct 10 '16 at 06:47

0

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

answered Oct 10 '16 at 06:47

Rahul

3,978
1
7
10

Thank you. Sorry that I misread your answer and accept it before. However, for your second solution, I changed it a little to solve the problem in my case: **1.** divide `
Hi, friend
` into 3 lines as I wished; **2.** `margin: 0;` is not needed, so I delete it; **3.** change `display: inline;` into `display: inline-block;`. – LoveMind Oct 10 '16 at 14:51
glad you figure it out – Rahul Oct 10 '16 at 15:15
Thank you. Very nice of you. – LoveMind Oct 10 '16 at 15:20

score 0 · Answer 3 · answered Oct 10 '16 at 07:09

0

Try display:table-cell - like this:

.inline {
  display: table-cell;
}

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

answered Oct 10 '16 at 07:09

sideroxylon

3,977
1
18
33

Thank you. I don't konw how it works , but it's also useful for this case. – LoveMind Oct 10 '16 at 13:39

How to avoid spaces when wrapping markup across multiple lines

3 Answers3

Linked