Mysterious space between 2 divs

Question

I have a set of two buttons next to a progress bar, for which the buttons are wrapped with a <div>:

<div class="block">
    <div class="progress progress-striped active">
        <div class="progress-bar" role="progressbar" style="width: 100%;"></div>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default btn-xs" title="Delete">
            <gly icon="trash"></gly>
        </button>
        <button type="button" class="btn btn-default btn-xs" title="Toggle Repeat">
            <gly icon="repeat"></gly>
        </button>
    </div>
</div>

http://jsfiddle.net/DerekL/M3NnV/

This works perfectly fine. Keep in mind that there is a small gap between the progress bar and the set of buttons.

This is just a template. What I want to do is to generate these codes programmatically:

//Code is in the fiddle

http://jsfiddle.net/DerekL/54Jhc/

The resulting HTML, by comparing with my template, looks the same. But that gap I was talking about has gone. I have tried inspecting the elements, and see what is causing the gap (I want the gap to be there) to appear but no luck. There's no margin nor padding hiding in there.

How do I get my space back?

Is the created HTML Exactly the same I wonder? I wonder if there isn't some obscure whitespace character causing that space. — TheNorthWes, Jun 05 '14 at 21:57
Have a look at this: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — jmoerdyk, Jun 05 '14 at 21:57
@AdmiralAdama it's that the first code has whitespaces that the javascript inserted code does not. — jmoerdyk, Jun 05 '14 at 21:59
@AdmiralAdama - Thank you so much! I spent an hour on this, tweaking margin and paddings and I couldn't figure out what's causing the gap in between. After I add a whitespace it looks exactly the same now. — Derek 朕會功夫, Jun 05 '14 at 22:05
Looks like you already found an answer, but here's my solution just for kicks: `btnGroup = $("
").addClass("btn-group").before(' ').appendTo(block),` — showdev, Jun 05 '14 at 22:08

score 4 · Accepted Answer · answered Jun 05 '14 at 22:08

In your HTML code example, there are line breaks and spaces for readability between your divs. These whitespaces actually end up as Text-Nodes in the DOM of the Browser. Especially the whitespace between the progress bar div and the button group div ends up as exactly one space character in the final output.

This is not good design, but if you really want to reproduce it in your code, you can add a text node between both divs like this:

space = $(document.createTextNode(" ")).appendTo(block)

I would recommend a margin on the progress bar, though.

score 0 · Answer 2 · answered Jun 05 '14 at 22:46

When your HTML is output programmatically via javascript it is minified - all of the white space between the tags has been stripped out. Most browsers interpret white space around inline-block elements as a non-breaking space ( ), which is why you had a space next to your progress bar even though you didn't actually specify any margin or padding. With the white space stripped out, the browser displays the elements without any spacing and your elements appear flush with each other.

So when dealing with inline-block elements that need to have exact spacing, it's best to remove the line breaks from your code so all browsers treat the elements the same. Then use margin or padding for accurate spacing.

See this CSS Tricks article for more info.

Mysterious space between 2 divs

2 Answers2