Hampus Hampus - 6 months ago 56
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

that I do not want. Consider the following example.


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


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

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


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



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

<span style="float: left">