Как устранить вертикальное пространство между тегами 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 «s не берут любую комнату в макете.

При показе своего статуса или других данных установите 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 of visibility:hidden

для валидаторов использовать display:dynamic свойство уменьшать пространство

другой сценарий, если вы не в состоянии chnage ваших, и сделать изменения попробуйте использовать ниже CSS селекторов, чтобы уменьшить пространство

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

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

Answer 4

Вы должны использовать

стиль = "дисплей: нет">

вместо

стиль = «видимость: скрытый»

Таким образом, нет места останется для элемента, не отображается.