html - 私が理解できる理由もなく、要素間のスペース

Question

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

これは、発行ドキュメントに関連する HTML 構造です。

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%;

}

JSフィドル

フィードからわかるように、マージンがないにもかかわらず、#colorscheme と #content の間にスペースがあり、border-box プロパティがあります。どうすれば減らすことができますか？

Answer 1

インライン ブロックは空白の問題を引き起こす可能性があるため、要素をフローティングすることをお勧めします。

このフォークされた例を見てください - http://jsfiddle.net/DkhDm/1/

一部のブラウザーでは、display inline-block がサポートされていないことにも注意してください。これは、常にその前にフロートを使用するもう 1 つの理由です。ただし、フロートをクリアするという小さな複雑さが追加されていますが、これは簡単に達成できます。

#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%; 
}

Answer 2

ブロックレベル要素を明示的にインラインブロックに減らしたので、これは論理的な単なる空白です。空白を削除すると消えます:

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

Answer 3

デモ

CSS:

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

私は追加float:left;して変更しましたdisplay:block;