Html 是什么导致浏览器将div1额外设置为29像素

在下面的html段中，div1是偏移量216px，div2是偏移量187。这是什么原因造成的，我如何纠正它。我知道我可以使位置相对，顶部为负29，以实现我想要的，但我真正想知道的是，为什么broswer将其解释为需要这种不均匀的偏移。为便于阅读，列表元素已被截断。这是html5

<div class="divpnl900W margin2">
    <fieldset>
        <legend>SubscriberSetup</legend>
        <div class="clear-fix">
            <div id="div1" class="divpnl400W inlineblock">
                <ul class="nobullet">
                    <li> <span class="div150RAlgn inlineblock">
                        @Html.LabelFor(model => model.SubscriberCompanyName)
                    </span>
 <span class="editor-field-alLw220 padding1">
                        @Html.EditorFor(model => model.SubscriberCompanyName)
                        @Html.ValidationMessageFor(model => model.SubscriberCompanyName)
                    </span>

                    </li>...</ul>
            </div>
            <div id="div2" class="divpnl400W inlineblock">
                <ul class="nobullet">
                    <li> <span class="div150RAlgn inlineblock">
                        @Html.LabelFor(model => model.SubscriberTrainingType)
                    </span>
 <span class="editor-field-alLw220 padding1">
                        @Html.DropDownListFor(model => model.SubscriberTrainingType, Model.TrainTypes)
                        @Html.ValidationMessageFor(model => model.SubscriberTrainingType)
                    </span>

                    </li>...</ul>@Html.HiddenFor(model => model.SubscriberId, new { @Value = "0" }) @Html.HiddenFor(model => model.SubscriberLoginId, new { @Value = "0" })
                <div style="text-align:right;">
                    <button type="submit" title="Save" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" style="height:22px;"> <span class="ui-button-icon-primary ui-icon ui-icon-disk"></span>
 <span class="ui-button-text">Save</span>

                    </button>
                </div>
            </div>
        </div>
    </fieldset>
    <div class="divpnl500W">
        <ul class="nobullet">
            <li> <span class="div150RAlgn inlineblock"><label>Search Company Name:</label></span>
 <span class="editor-field-alLw220 padding1">
                <input type="text" id="txtSrchSubscriber" />
            </span>
 <span>
                <button type="button" title="Search" role="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only"
                        style="height:22px;" onclick="getSubscriberGrid()">
                    <span class="ui-button-icon-primary ui-icon ui-icon-search"></span>
 <span class="ui-button-text">Search</span>

                </button>
                </span>
            </li>
        </ul>
    </div>

---

垂直对齐div以保持一致性：

#div1, #div2 {vertical-align: top;}

---

你的CSS在哪里？如果没有它，就无法判断..清除修复：在{content:；清除：两者；显示：块；高度：0；可见性：隐藏；}.divpnl900W{width:900px；}.margin2{margin:2em；}.divpnl400W{width:400px；}.inlineblock{display:inline block；}.div150RAlgn{width:150px；文本对齐：右；填充：3px；}.editor-field alLw220{width:220px；}.editor-field-alLw220-input[type=text]{width:210px；}.editor-field-alLw220-input[type=password]{width:210px；}.nobullet{list-style:none；list-style-type:none；padding-left:1em；}这就是所有HTML的CSS？我添加了其余部分，但格式很糟糕！Sorry在代码块中将其添加到原始帖子中

#div1, #div2 {vertical-align: top;}