why extra space after first element

Admin 1
Viewed 73

$(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>

Click on lorem, ipsum, lorem...

Why there is an extra space (about 2px) between the first crumb (home) and the first line (-) compared to all next of them?

html javascript
5 Answers

The issue is here - 

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

Change - If you put last closing div element after crumb. It will not count it as space.

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

user_19826310

Because you have added a white space before div closing.

The issue is called HTML Block element Bug: you can see https://stackoverflow.com/a/19038859/4229270

$(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;
background:gold;
padding: 0px 7px;
}
.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> <!-- Here was the issue -->
<br>
<div class='store'>
<div class='item'>lorem</div>
<div class='item'>ipsum</div>
</div>

Hope this helped you.

user_42292700

The space is a newline character, one possible fix is add font-size: 0 to the parent container

$(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;
font-size: 16px;
}
.crumb{
display:inline-block;
padding:0 7px;
background:gold;
font-size: 16px;
}
.item{
cursor:pointer;
}
.path{ font-size: 0; }
<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>

user_103231640

There is padding in your css.

padding:0 7px;

change it into 

padding:0 0px;
user_102549280

I am not sure why are you not using Float. Is there any specific reason you are not using float?

I would suggest you to use below css and everything would be work fine.

.crumb,.line{float:left}
user_18384510
Related