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 中的实际空格。实际呈现内联块元素之间的空白。如果删除空格，那么它将起作用。

e.g。

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

http://jsfiddle.net/Yq5kA/

Answer 2

源代码中有空格。您可以删除空格，也可以将容器的字体大小设置为0（0r 0.1px以避免某些浏览器问题）。

只需在所有元素周围添加一个包装div，例如名为“container”，并给它：

font-size: 0.1px;

请参阅更新的小提琴：

http://jsfiddle.net/6sBgx/3/

请注意，对于此解决方案，如果包含div的文档中包含文本，则必须重置字体大小。

Answer 3

更改CSS：

.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;

}

Answer 4

我知道这不是理想的解决方案，但它有效：

.isred{
    background-color:red;
    margin-right: -5px;
}
.ispurple{
    background-color:purple;
    margin-right: -5px;
}
.isgrey{
    background-color:grey;
}

Answer 5

这是我更新的css将解决问题

.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}

Answer 6

HTML元素之间存在实际空格。因此，要删除它，您可以尝试执行以下解决方案：

Read This document

尝试Jsfiddle -

Remove the spaces - http://jsfiddle.net/6sBgx/7/

Negative margin -  http://jsfiddle.net/6sBgx/8/

Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/

Just float them left - http://jsfiddle.net/6sBgx/9/

从内联块中删除右边距

6 个答案: