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

Question

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

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

我不想看到任何红色（除了最右边，它会在右边距％被设置时得到修复）

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

Answer 1

添加：margin：0;和填充：0;它解决了垂直问题，因为浏览器会添加自己的默认设置，建议您使用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

你可以尝试浮动：离开内部divs：

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%;*/
}