New line in HTML creates implicit margin

Question

This must be a super common problem but I din't find a solution.

I get a margin between two spans that I do not want. Consider the following example.

style.css

.item {
  background-color: blue;
  color: white;
  margin: 0;
  padding: 6px;
}

items.html

<div>
  <span *ngFor="let index of [1,2,3,4,5,6]" class="item">{{index}}</span>
  <span class="item">7</span>
</div>

1 to 6 stay together like best friends while 7 is treated like an outcast. Problem can be worked around by moving the span for 7 up to the same row as the others, but that won't fly with me.

It's because browser generates single space between your spans. — Justinas, Oct 21 '16 at 09:26
Probably you should post the code that is generated in AngularJS also tag this question for Angular JS, it seems to be more of an angular issue than css — frazras, Oct 21 '16 at 09:27
Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) — Paulie_D, Oct 21 '16 at 09:27
@Justinas: I know that. I also know it is 'by design' for good reason. But in this particular case I want to 'disable' that behaviour. — Hampus, Oct 21 '16 at 09:27
@Paulie_D: I'll create a plunker or something. I just though that since most know the reason for the problem that some would have a solution without needing to run the code. — Hampus, Oct 21 '16 at 09:29
spans are inline elements - these are treat like words in a sentence, if there is space in between them, there will be a space added between them on the page - you either need to comment out the space, place them all on the same line next to each other or float the elements — Pete, Oct 21 '16 at 09:35

score 2 · Accepted Answer · answered Oct 21 '16 at 09:30

2

Answered lots of times. It's because new line generates single white space between elements. To fix it:

<span></span><span></span>

<span></span><!--
--></span>

<div style="font-size: 0">

<span style="float: left">

answered Oct 21 '16 at 09:30

Justinas

41,402
5
66
96

1

if this is answered many times vote to close it as a duplicate – Pete Oct 21 '16 at 09:36

score 0 · Answer 2 · answered Oct 21 '16 at 09:33

0

I don't know could this help but I've just added "float: left" into your "item" class. That works.

.item {
  background-color: blue;
  color: white;
  margin: 0;
  padding: 6px;
 float: left;
}

answered Oct 21 '16 at 09:33

Erdem

34
4

New line in HTML creates implicit margin

2 Answers2