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

}

JSfiddle

正如您从 feedle 中看到的，#colorscheme 和#content 之间有一些空间，尽管没有边距，并且有 border-box 属性。我怎样才能减少它？

Answer 1

内联 block 可能会导致空白问题，我建议 float 元素。

看看这个 fork 的例子 - http://jsfiddle.net/DkhDm/1/

同样值得注意的是，display inline-block 在某些浏览器中缺乏支持 - 这是始终在其前面使用 float 的另一个原因!然而，您确实有清除 float 的小额外复杂性，但这很容易实现。

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