CODEWITHSUNDEEP
htmlcssjsfiddle
user1108948
user1108948

Reputation:

Is it the bug of jsfiddle

I have an area in which I want to add two buttons inside in. The code is pretty straight:

<div id="switcher"> 
 <div class="button" id="Sunday">Sunday</div>
 <div class="button" id="mic">mic</div>
 </div>

The demo is at http://jsfiddle.net/zhshqzyc/vBbeQ/

If we use the same CSS, but rewrite the code of the two elements in one line:

<div id="switcher"> 
<div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>

The demo is at http://jsfiddle.net/zhshqzyc/vBbeQ/1/ It seems that there is a line break in the first case but jsfiddle can't recongize it.

Is it the bug of jsfiddle?

Thanks.

Upvotes: 1

Views: 174

Answers (3)

Olly Hodgson
Olly Hodgson

Reputation: 15785

No, this is just how display: inline-block; works. It's sensitive to whitespace around the elements (just like display: inline;), so this:

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div>
<div class="button" id="mic">mic</div>
</div>

Is different to this:

<div id="switcher">
    <div class="button" id="Sunday">Sunday</div><div class="button" id="mic">mic</div>
</div>

This effects rendering because browsers will render a space between the two .button elements. As a result they no longer fit on the same line.

There's loads more about inline-block at http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/

Upvotes: 3

void
void

Reputation: 482

It's happening because of the width of the switcher DIV.

When you write your code with a line break it will be printed a little 'whitespace' between the DIVs. And the width of the 2 button DIVs plus the 'whitespace', is bigger than the width of the switcher div.

See here

Upvotes: 2

Barmar
Barmar

Reputation: 781493

It's not because they're on the same line, but because you have no whitespace between the two DIVs. Change the second one to:

<div class="button" id="Sunday">Sunday</div> <div class="button" id="mic">mic</div>

and it behaves just like the first one. This has nothing to do with jsfiddle, it's just the way HTML works: if there's no separator, it won't break the line.

Upvotes: 1

Related Questions