Hampus Hampus - 11 months ago 82
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 Source

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