CODEWITHSUNDEEP
htmlcss
Joe Half Face
Joe Half Face

Reputation: 2333

Some space between elements without any reason I can figure out

<div id="colorscheme">
</div>
<div id="content">
<div id="display_saved">
 TEXT TEXT TEXT   
</div>

This is HTML structure of related to issue document.

CSS:

#colorscheme{
    width:25%;
    display:inline-block;
    height: 50px;
    background:green;
}
#content{
    width:50%;
    display:inline-block;
    background: gray;
     box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
}
#display_saved{
    border: solid 1px red;
    padding: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width:100%;

}

JSfiddle

As you can see from the feedle, there is some space between #colorscheme and #content, despite there is no margins, and there is border-box property. How can I reduce it?

Upvotes: 3

Views: 398

Answers (5)

2507rkt3
2507rkt3

Reputation: 21802

You can also use html comments to eliminate the whitespace.

<div>
  <p>Content</p>
</div><!--
--><div>
  <p>More content</p>
</div>

Upvotes: 0

loddn
loddn

Reputation: 658

You can move the elements back into place with negative 4px of margin. (Not in IE6,7). inline-block do cause whitespace, i don't think it's a bug and it's rather nice to have when using inline-block on text-elements.

#colorscheme{
    margin-right: -4px;
    width:25%;
    display:inline-block;
    height: 50px;
    background:green;
}

Upvotes: 0

Aravind30790
Aravind30790

Reputation: 992

DEMO

CSS:

#colorscheme{
    width:25%;
    display:block;
    height: 50px;
    background:green;
    float:left;
}

i have added float:left; and changed to display:block;

Upvotes: 0

Chris
Chris

Reputation: 2035

Inline block can cause whitespace issues and I would recommend floating the elements.

Have a look at this forked example - http://jsfiddle.net/DkhDm/1/

It's also worth noting that display inline-block lacks support in some browsers - which is another reason to always use floats ahead of it! You do however have the small added complication of clearing the floats but this is easily achieved.

#colorscheme{
    width:25%;
    float: left;
    height: 50px;
    background:green;
}
#content{
    width:50%;
    float: left;
    background: gray;
     box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
}
#display_saved{
    border: solid 1px red;
    padding: 20px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width:100%; 
}

Upvotes: 4

Niels Keurentjes
Niels Keurentjes

Reputation: 41958

It's just whitespace, which is logical because you've reduced your blocklevel elements to inline blocks explicitly. Eliminate the whitespace and it'll go away:

<div id="colorscheme"></div><div id="content"><div id="display_saved">TEXT TEXT TEXT </div></div>

Upvotes: 1

Related Questions