javascript - 为什么在第一个元素之后有额外的空间

Question

$(document).on('click', '.item', function () {
var title = $(this).text();
var obj = $("<div class='line'> - </div><div class='crumb'>" + title + "</div>");
	obj.appendTo('#path');
});

.line{
display:inline-block;
margin:0 2px;
}
.crumb{
display:inline-block;
padding:0 7px;
background:gold;
}
.item{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div>
</div>
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>

点击lorem, ipsum, lorem...

为什么第一个 crumb (home) 和第一行 (-) 与所有下一行相比有一个额外的空间(大约 2px)？

Answer 1

问题在这里——

<div class='path' id='path'>
  <div class='crumb'>home</div>
</div> <--- this div is counting that extra space.

更改 - 如果将最后一个关闭的 div 元素放在 crumb 之后。它不会将其算作空间。

<div class='path' id='path'>
<div class='crumb'>home</div></div>

$(document).on('click', '.item', function () {
var title = $(this).text();
var obj = $("<div class='line'> - </div><div class='crumb'>" + title + "</div>");
	obj.appendTo('#path');
});

.line{
display:inline-block;
margin:0 2px;
}
.crumb{
display:inline-block;
padding:0 7px;
background:gold;
}
.item{
cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='path' id='path'>
<div class='crumb'>home</div></div>
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>