title: Element hidden by CSS still takes up space on page- how do I set display: none conditionally?
body: <p>I'm working on a web application that has been written in VB.net. On the login page for the app, there is an error message that's displayed conditionally, if the user clicks the Log In button having not entered anything into the password box:</p>
  
  <p>The functionality of this all currently works correctly, and the message is only displayed when nothing has been entered into the password field, and there is a click off the form, or on the 'Proceed' button.</p>
  
  <p>However, there is space left where the message would be displayed, even when it isn't:</p>
  
  <p>I have been asked to remove this space, so that the 'Forgotten Password' link is displayed directly below the Password text box when the error message is not displayed.</p>
  
  <p>However, despite setting the visibility attribute of the error message element in the CSS, I can't actually seem to remove the space when the message is not shown.</p>
  
  <p>The only way I have found of doing this is to set the element's <code>display</code> attribute to <code>none</code> in the CSS- but this obviously then means that the message is not displayed when the password field is left blank.</p>
  
  <p>The CSS set on the field is:</p>
  
  <pre><code>.loginarea .loginerror {
      color: Red;
      font-size: 1.8em;
  }
  </code></pre>
  
  <p>and the form field is displayed with:</p>
  
  <pre><code>&lt;body class="login"&gt;
      &lt;form id="form1" runat="server"&gt;
          ...
          &lt;div id="divLoginBg" runat="server" class="loginbg"&gt;
              &lt;div class="loginarea"&gt;
                  &lt;asp:Panel ID="Step1" CssClass="greyblock" runat="server"&gt;
                      &lt;asp:TextBox ID="Password" ValidationGroup="loginpage" autocomplete="off" TextMode="Password" runat="server" /&gt;&lt;br /&gt;
                      &lt;asp:RequiredFieldValidator ID="Req2" ValidationGroup="loginpage" ControlToValidate="Password" runat="server" CssClass="loginerror" ErrorMessage="Please enter your password" /&gt;&lt;br /&gt;
                      ...
                  &lt;/asp:Panel&gt;
                  ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>How can I set the element's <code>display</code> attribute to <code>none</code> conditionally? i.e. its <code>display</code> should only be <code>none</code> when there is no password entered in the text box?</p>