Accordion height bugs

Fiddle for testing accordion auto-height bugs

HTML

<script src="http://jqueryui.com/jquery-1.5.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.js"></script>
<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>Alpha</p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>Bravo</p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>Charlie</p>
    </div>
</div>

CSS

h3 { margin: 16px 0; }                      /* BAD */
/* p  { margin: 16px 0; } */                   /* BAD */
/* div  { border-bottom: solid 16px black } */ /* BAD */

/* h3, p { margin: 0; }   */                   /* OK  */
/* p { padding: 16px 0; } */                   /* OK  */

#accordion {  border: solid 1px black; }

JavaScript

$(document).ready(function(){
    $("#accordion").accordion();
});