请教一个DIV做的格子错位问题

[hhubon]

<style>
.grid{
border-top:1px solid black;
}
.title {
border-right:1px solid black;
border-left:1px solid black;
border-bottom:1px solid black;
}
.obj{
border-right:1px solid black;
border-bottom:1px solid black;
}

</style>


<div class="grid" style="width:600px">
<div id="line0" style="width:600px;">
<div class="title" style="display:inline;width:200px;height:25px">姓名</div>
<div class="obj" style="padding-left:5px;display:inline;width:400px;height:25px"><input id="name" type="text"></div>
</div>
<div id="line1" style="width:600px;height:25px">
<div class="title" style="display:inline;width:200px;height:25px">id</div>
<div class="obj" style="padding-left:5px;display:inline;width:400px;height:25px"><input id="id" type="text"></div>
</div>
</div>

右边装有文本框的格子向下错了一个像素，不知怎么解决，请大家帮帮忙

[wzqing]

把字体大小定义好，~比如，font-size:12px再试试``

[hhubon]

虽然加font-size:12px没有解决问题，但还是感谢。

初步总结原因是display：inline的问题，解决方法是用子母层或者float：left替换