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

内联块可能会导致空白问题，我建议浮动元素。

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

还值得注意的是 display inline-block 在某些浏览器中缺乏支持 - 这是总是在它之前使用浮动的另一个原因！但是，您确实有清除浮动的小额外复杂性，但这很容易实现。

#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

您还可以使用 html 注释来消除空格。

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

Answer 4

演示

CSS：

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

我已添加float:left;并更改为display:block;

Answer 5

您可以使用负 4px 的边距将元素移回原位。（不在 IE6,7 中）。inline-block 确实会导致空白，我不认为这是一个错误，并且在文本元素上使用 inline-block 时非常好。

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