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

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;
}