why extra space after first element

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>

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?

The extra space is [from the newline between `
home
` and the following ``](https://stackoverflow.com/questions/5078239/how-do-i-remove-the-space-between-inline-block-elements) in the original markup. The other crumbs are inserted without any surrounding whitespace, though you can force some in by adding `$('#path').append(document.createTextNode('\n'));` after `obj.appendTo('#path')` to see the same effect throughout. — Jonathan Lonowski, Sep 06 '18 at 06:30
@JonathanLonowski, `new line` is a `new line` and `space` should be a `space`. What kind of scrubbing exactly? — , Sep 06 '18 at 06:36
Possible duplicate of [Why is there an unexplainable gap between these inline-block div elements?](https://stackoverflow.com/questions/19038799/why-is-there-an-unexplainable-gap-between-these-inline-block-div-elements) — Sinto, Sep 06 '18 at 06:37

score 1 · Accepted Answer · answered Sep 06 '18 at 06:34

1

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>

answered Sep 06 '18 at 06:34

Manoz

6,507
13
68
114

I see but WHY is a new line rendered as a space? – Sep 06 '18 at 06:38
3

[WHY is a new line rendered as a space?](https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space) – Sep 06 '18 at 06:42
1

@puerto, That is because the space between the boxes comes from the newlines and indentation in the markup. jQuery doesn't preserve this formatting style when appending elements because it modifies the DOM. Since we are appending to `block-level` element that initially appends with that space because the existing DOM element is block-level. – Manoz Sep 06 '18 at 06:48

Sinto · Answer 2 · 2018-09-06T06:34:13.727

0

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.

edited Sep 06 '18 at 06:34

answered Sep 06 '18 at 06:14

Sinto

3,915
11
36
70

I have noted that, let me fix it – Sinto Sep 06 '18 at 06:17
but it should be the same on dinamically added elements? Btw, on your snippet there is also an extra space! – Sep 06 '18 at 06:17
so what is the difference between `
` and `
\n
`? New line is not a space. – Sep 06 '18 at 06:29
hope its fixed for you – Sinto Sep 06 '18 at 06:34

Chris Li · Answer 3 · 2018-09-06T06:48:12.903

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>

Can you post an example as well, please? – bhansa Sep 06 '18 at 06:37 — bhansa, Sep 06 '18 at 06:37

score -1 · Answer 4 · answered Sep 06 '18 at 06:17

-1

There is padding in your css.

padding:0 7px;

change it into

padding:0 0px;

answered Sep 06 '18 at 06:17

kishan yadav

21
7

The space should be the same on dinamically added elements. – Sep 06 '18 at 06:18

score -1 · Answer 5 · answered Sep 06 '18 at 06:25

-1

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}

answered Sep 06 '18 at 06:25

Ambuj Khanna

1,131
3
12
32

Thanks, but I need to know what is the problem with `inline-block`. – Sep 06 '18 at 06:31

why extra space after first element

5 Answers5