remove right margin from an inline

I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.

This is the 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;
}

this is the 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>

---

That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.

eg

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

http://jsfiddle.net/Yq5kA/

---

There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).

Just add a wrapper div around all elements, for example named "container", and give it:

font-size: 0.1px;

See updated fiddle:

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

Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.

---

Change the CSS:

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

}

链接地址: http://www.djcxy.com/p/15786.html

上一篇: 块; 如何删除空白

下一篇: 从内联删除右边距