javascript - 如何消除div标签之间的垂直空间

Question

一个示例html，包含4个div标签，第一个标签几乎没有html控件，第二个和第三个div仅用于根据条件显示状态。第四个用于提交按钮。

默认情况下，第一个和第二个可见性是隐藏的。但是，它占用了垂直空间，因此我的提交按钮位置有一些空白。我怎样才能减少这个空间？

我的代码:

<!-- Div 1 -->
<div>
<!-- few controls goes here -->
</div>

<!-- Div 2 -->
<div style="visibility:hidden">
<asp:CompareValidator ID="valPwd" validationgroup="valRegGroup" runat="server" ErrorMessage="Passwords don't match" CssClass="validation" ControlToCompare="txtPwd" ControlToValidate="txtConfirmPwd"></asp:CompareValidator>
</div>

<!-- Div 3 -->
<div style="visibility:hidden">
<asp:Label ID="lblStatus" runat="server" Text="" CssClass="validation"></asp:Label>
</div>   

<!-- Div 4 -->
<div style="top:0px;margin-top:0px;">
<asp:Button ID="btnValidate" runat="server" Text="Renew" 
  CssClass="SubmitButton" onclick="btnValidate_Click"  />                     
</div>

Answer 1

您可以尝试设置 display: none，这样 div 就不会占用布局中的任何空间。

显示您的状态或其他数据时，设置 display: block 以使其可见。

使用 visibility:hidden 隐藏元素，但保留其在布局中的空间和位置。

要了解 visibility 属性，请参阅:http://www.w3.org/TR/CSS21/visufx.html#visibility

要了解 display 属性，请参阅:http://www.w3.org/TR/CSS21/visuren.html#display-prop