這個例子中, outer 比 container 高出幾個像素, 這個高度差是如何產生的? 如何消除?

[013231]

http://jsfiddle.net/6tE9z/

<div id="outer">
<div id="container">
<div id="element">
some text
</div>
</div>
</div>

#container {
display: inline-block;
position: relative;
width: 50%;
}
#container:after {
content: '';
display: block;
margin-top: 100%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver;
}

div {
margin: 0;
padding: 0;
}

#outer {
background-color: blue;
}

[nijux]

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

#container {
display: inline-block;
position: relative;
width: 50%;
font-size:14px;
}
#container:after {
content: '';
display: block;
margin-top: 100%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver;
}

div {
margin: 0;
padding: 0;
}

#outer {
background-color: blue;
font-size:0;
}

[belin520]

inline-block产生的

[10yearsme]

@belin520 Hi~我是广志，十年后（10years.me）的运营经理。我刚刚看到你的回答和v2ex上的其他交流，感觉和我们的技术和团队风格都挺合拍 ，希望可以聊聊。十年后是一个基于梦想的社交网络，我们想用它让年轻人的生活更有未来性，网站是去年年末上线的。我们上个月刚拿到创新谷VC百万元天使轮融资，现在在招募Web前端开发的人才。可以加我的微信lgz715314聊聊，交个朋友也不错：）