Hampus Hampus - 1 month ago 20
CSS Question

New line in HTML creates implicit margin

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.

Answer

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">