如何消除div標籤之間的垂直空間

Question

包含4個div標籤（其中第一個html控件很少，第二個和第三個div僅用於狀態顯示）的示例html基於條件。第四個用於提交按鈕。

默認情況下第一個和第二個可見性是隱藏的。但是，它佔用了垂直空間，因此我的提交按鈕位置有一些空的空間。我怎樣才能減少這個空間？

我的代碼：

<!-- 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

Answer 2

<div style="display:none"> 

將解決你的問題

顯示和可見性是不同的樣式屬性

Answer 3

嘗試display:none insted visibility:hidden

用於驗證使用display:dynamic屬性來減少空間

另一種情況，如果你不能chnage您做出的修改嘗試使用下面的CSS選擇器，以減少空間

div[style*="visible"] { 
display:inline; 
    } 

div[style*="hidden"] { 
     display:none; 
    } 

Answer 4

你應該使用

風格= 「顯示：無」>

，而不是

風格= 「visibility：hidden的」

這樣沒有空間將留給未顯示的元素。