[求助]:css布局一个奇怪的问题，css老手进来

<style type="text/css">
#right{height:100px;width:700px;}
#right1{height:100px;width:700px;padding-left:24px;padding-right:24px;}
</style>
<div id="right"></div>
<div id="right1"></div>
为什么在#right1中我定义了内补丁，但是整个块就变长了？
而为什么这样定义就没事．如下：代码：
<style type="text/css">
#right{height:100px;width:700px;}
#right1{height:100px;padding-left:24px;padding-right:24px;}
</style>
<div id="right">
<div id="right1">f</div>
</div>
<div id="right"></div>
这是我一个朋友发现的，我觉得这个问题好奇怪．
希望各路高手说下看发．为什么会这样．我百思不得其解．希望得到答案；