无法删除JQuery Accordion Headers之间的空间

Question

我已经查看了问题here和here，但我无法弄清楚如何删除导航栏中jquery-ui手风琴标题周围的空间。我试过使用chrome，即ff和safari，看看相关的开发工具，似乎都保证我的边距和填充都是0px。

这就是我想要的。

http://media02.hongkiat.com/jquery-ui-accordion/accordion-second-look.jpg

抱歉，我没有代表发布图片。

所以，here's a jsfiddle与我的基本网站构建。

HTML

    <div id="nav" style="width: 15%; float: left;">
        <div>
            <h3>Home</h3>
        </div>
        <div></div>
        <div>
            <h3>Travel</h3>
        </div>
        <div>
            View trips booked through the agency. 
  <ul>
          <li>Trips Pending </li>
          <li>Trips Archived</li>
          <li>Travelers</li>
      </ul>
        </div>
        <div>
            <h3>Accounts</h3>
        </div>
        <div>Select an account and view information about it, such as it's transactions, travelers associated with the account, and trips booked.</div>
        <div>
            <h3>Admin</h3>
        </div>
        <div>Generate comission reports, manage users and passwords, and deal with administrative information.</div>
    </div>

的CSS

html, body
{
    padding:0px;
    margin:0px;
    height:100%;
}
html
{
    background:#CCCCCC; 
}
:focus, :active 
{  
    outline: 0;  
}
#nav .ui-accordion-content 
{  
    width: 100%;  
    background-color: #f3f3f3;    
    font-size: 10pt;  
    line-height: 16pt;
}
#nav .ui-accordion-content > * 
{  
    margin: 0;  
    padding: 20px;  
}  
#nav .ui-accordion-header 
{  
    background-color: #E6E6E6;  
    margin: 0px;  
}
#nav .ui-accordion-header, .ui-accordion-content
{
    padding: 0px;
}
* 
{   
    -moz-box-sizing: border-box;   
    -webkit-box-sizing: border-box;   
    box-sizing: border-box;  
}

的js

$("div#nav").accordion({ heightStyle: "content" });

非常感谢StackOverflow的有用社区。

Answer 1

h3标题上有1em余量。将它们重置为0将删除它们周围的所有间距。

Answer 2

这是一个保证金崩溃问题，请参阅the MDN page about it

  

父母和第一个/最后一个孩子

     

如果没有边框，填充，内联内容或间隙将块的边距顶部与其第一个子块的边距顶部分开，或者没有边框，填充，内联内容，高度，最小高度或者max-height将块的边距底部与其最后一个子节点的边缘底部分开，然后这些边距会崩溃。折叠的保证金最终在父母之外。

因此，在.ui-accordion-header和.ui-accordion-content中添加小填充或透明边框可防止h3边距崩溃。