从内联删除右边距
我正在创建一个博客页面，并且我设计了这个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>
这将是HTML中的实际空间。 内联块元素之间的空白实际上被渲染。 如果你删除了空白，那么它会起作用。
例如
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
源代码中有空白。 您可以删除空格，也可以将容器的字体大小设置为0（0或0.1px以避免某些浏览器问题）。
只需在所有元素周围添加一个包装div，例如命名为“container”，并给它：
font-size: 0.1px;
查看更新的小提琴：
http://jsfiddle.net/6sBgx/3/
请记住，对于此解决方案，如果包含div的文本应该包含在其中，则必须重置字体大小。
更改CSS：
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
链接地址: http://www.djcxy.com/p/15785.html