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;

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

          <script src=""></script>
          <script src="js/jquery-ui-1.10.0.custom.min.js"></script>

              * {
                  margin: 0;
                  padding: 0;
                  -webkit-box-sizing: content-box;
                  -moz-box-sizing: content-box;
                  box-sizing: content-box;
             .form { margin:2em; }
             .fieldcontain label{
                 margin: 0 0.5em 0.8em 0;

          <script type="text/javascript">
                var alturaAtual = $('#login').outerHeight()
    <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 class="fieldcontain">
               <label for="senha">Password</label>
               <input type="password" name="senha" id="senha"/>
         <br />dfdfdf
         <br />dfdfdf
         <br />dfdfdf
         <br />dfdfdf
         <br />dfdfdf
    <input type="button" value="Click here" />

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.