css - 如何使用 display:inline-block 消除 div 之间的间距？

Question

我试图对 div 做一些水平布局，但在 div 之后得到一个不需要的“边距”。 http://jsfiddle.net/Yzxpu/

当我更改标记并删除空格或换行符时，水平间距问题得到解决，但 div 下仍然存在垂直间距。而且标记看起来很糟糕。 http://jsfiddle.net/Yzxpu/1/

我不想看到任何红色（除了最右边，它会随着右边距 % 的设置而固定）

我正在使用最新的 Chrome 作为网络浏览器。

Answer 1

通过添加：保证金：0；和填充：0；对于 CSS，它修复了垂直问题，因为浏览器添加了自己的默认设置，建议您使用 reset.css 表将所有内容设置回 0。

修复的小提琴：http: //jsfiddle.net/ynemx/ 重置 CSS： http: //meyerweb.com/eric/tools/css/reset/

Answer 2

试试这个

http://jsfiddle.net/Yzxpu/10/

改变你的 CSS

#t-newsAndInfo{background-color:red; overflow:hidden}

#t-newsAndInfo div {float:left;}

删除"DISPLAY"_#t-newsAndInfo div

Answer 3

您可以尝试浮动：离开内部 div：

http://jsfiddle.net/Yzxpu/15/

#t-newsAndInfo{background-color:red; overflow:hidden;}

#t-newsAndInfo div {
    background-color:lightyellow;
    display: inline-block;
    float:left;
    position: relative;
    width: 31.11111111111111%;/*((900-(30+30))/3)/900*/
    height: 100px;
    text-align: center;
    /*margin-right: 3.111111111%;*/
    /*margin-right: 2.99999999999%;*/
}