CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

Mysterious space between 2 divs

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?

Upvotes: 1

Views: 218

Answers (2)

Kristen Grote
Kristen Grote

Reputation: 2777

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 (&nbsp;), 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.

Upvotes: 0

Rialgar
Rialgar

Reputation: 753

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.

Upvotes: 4

Related Questions