我编写了一段HTML代码和CSS代码，但是出来的效果与我想要编写的效果完全相反：
demo.html
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hello World! </title>
<link rel="stylesheet" href="demo.css" type="text/css" />
</head>
<body>
<div id="father">
<div id="son">
</div>
</div>
</body>
</html>
demo.css
div#father
{
width:10px;height:10px;background:red;
}
div#son
{
padding-top:3px;padding-bottom:3px;padding-left:5px;padding-right:0px;background:green;
}
我想让它显示一个方块，其中，有一个红色块在左边，半包围右边的绿色块，构成整个方块，就像竖起来的“凹”字。
而事实却是，一个方块，上半部分显示绿色，下半部分显示红色。
这是为什么？怎么样才能实现呢？
拜托各位，帮帮忙！
CSS code:
div#father
{
width:10px;height:10px;background:red; overflow:hidden; position:relative;
}
div#son
{
top:3px;bottom:3px;left:5px;right:0px;background:green; overflow:hidden; width:5px; height:4px; position:absolute;
