html - 从内联 block 中删除右边距

Question

我正在制作一个博客页面，我设计了这个 http://jsfiddle.net/thiswolf/6sBgx/但是，我想删除大红色框底部的 grey,purple and red boxes 之间的空白。

这是CSS

.top_div{
    border:1px solid red;
    position:relative;
}
.pink{
    width:40px;
    height:40px;
    display:block;
    background-color:pink;
}
.green{
    width:40px;
    height:40px;
    display:block;
    background-color:green;
}
.orange{
    width:40px;
    height:40px;
    display:block;
    margin-top:120px;
    background-color:orange;
}
.red{
    width:600px;
    height:240px;
    display:block;
    background-color:red;
    margin-left:40px;
    position:absolute;
    top:0;
}

.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
    background-color:red;
}
.ispurple{
    background-color:purple;
}
.isgrey{
    background-color:grey;
}

这是html

<div class="top_div">
    <div class="pink">

    </div>
    <div class="green">

    </div>
    <div class="orange">

    </div>
    <div class="red">

    </div>
    </div>
    <div class="bottom">
    <div class="author isred">

    </div>
    <div class="date ispurple">

    </div>
    <div class="tags isgrey">

    </div>
    </div>

Answer 1

那将是 HTML 中的实际空格。内联 block 元素之间的空白实际上被渲染了。如果您删除空格，那么它将起作用。

例如

    <div class="bottom"><div class="author isred"></div><div class="date ispurple">
    </div><div class="tags isgrey"></div>

http://jsfiddle.net/Yq5kA/