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之间有一些空间，尽管没有边距，并且有边框属性。我怎样才能减少它？

Answer 1

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

看看这个分叉的例子 - http://jsfiddle.net/DkhDm/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

DEMO

CSS：

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

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

Answer 4

您可以将元素移回到负4px边距的位置。（不是在IE6,7中）。内联块确实会导致空格，我不认为这是一个错误，在文本元素上使用内联块时非常好。

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

Answer 5

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

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

元素之间的一些空间没有任何理由我可以搞清楚

5 个答案: