How to get the actual height of a parent div?

How to get the actual height of a parent div?

If I have a child element with some margin established, its parent won't return its actual height ( wont't count the child's margin, I mean) when using the command .outerHeight(), unless I establish either (not all) of the following properties to the parent div:

border:1px solid;
overflow:hidden
display:table-cell;

Why is that? Which of these properties should I use (..and why '-')? Should I do something different? Ty in advance. Here's the code:

  1. <!DOCTYPE HTML>
    <head>
          <title>Sample</title>
          <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
          <script src="js/jquery-ui-1.10.0.custom.min.js"></script>

          <style>
              * {
                  margin: 0;
                  padding: 0;
                  -webkit-box-sizing: content-box;
                  -moz-box-sizing: content-box;
                  box-sizing: content-box;
              }
     
             .form { margin:2em; }
             .fieldcontain label{
                 width:8em;
                 text-align:right;
                 display:inline-block;
                 margin: 0 0.5em 0.8em 0;
             }
             #login{
                
             }
          </style>

          <script type="text/javascript">
              $(document).ready(function(){
                var alturaAtual = $('#login').outerHeight()
                alert(alturaAtual)
            })
          </script>
         
    </head>
    <body>
    <div id="login" style="width:25em;">
         <form class="form" action="#">
               <div class="fieldcontain">
               <label for="username">User Name</label>
               <input type="text" name="username" id="username"/>
               </div>
               <div class="fieldcontain">
               <label for="senha">Password</label>
               <input type="password" name="senha" id="senha"/>
               </div>
         </form>
         <br />dfdfdf
         <br />dfdfdf
         <br />dfdfdf
         <br />dfdfdf
         <br />dfdfdf
    </div>
    <input type="button" value="Click here" />
    </body>
    </html>






















































So, if I put either of those css properties i talked about earlier(in #login selector) it would work out fine , but not sure why '-'. In this example the form element(.form selector) has a margin that causes its div parent not to calculate its height right.