Question

我有两个div，在这两个div之间是某种我似乎无法摆脱的空白区域。如果有帮助，这是jsfiddle：http://jsfiddle.net/aBzPv/1/

基本上一个div是我页面顶部的菜单（垂直列表）。我想在它下面直接为“Recent Items”创建另一个div。我注意到我的第一个div（corp-crumb）和我的第二个div（最近的碎屑）之间有太多的空白区域：

<div>
            <div id="corp-crumb">
                <ul class="vertlist" id="ulTop">
                    <li class="crumblink submenu"><a id="createNewLink" href="#" title="Create New" class="crumblink">Create New</a>
                         <ul>
                            <li><a href="#" title="Company">Company</a></li>
                            <li><a href="#" title="Contact">Contact</a></li>
                        </ul>
                    </li>
                  </ul>
            </div> 
            <div id="recent-crumb">hello world what is this white space here ^^^^^^^^</div>
        </div>
        <div class="clearfix"></div>

一些CSS：

#corp-crumb {
    background: rgb(252, 252, 252); 
    margin: 0px -12px 20px; 
    padding: 0px 10px; 
    /*overflow: hidden;*/ 
    font-size: 11px; 
    border-bottom-color: rgb(242, 242, 242); 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    min-height: 28px;
}

#recent-crumb {
    background: rgb(252, 252, 252);
    margin: 0px -12px;
    padding: 0px 10px; 
    overflow: hidden;
    font-size: 9px; 
    border-bottom-color: rgb(242, 242, 242); 
    border-bottom-width: 1px; 
    border-bottom-style: solid; 
    min-height: 28px;
}

.vertlist ul {
    margin: 0px 2em 0px 3.6em; 
    color: rgb(68, 68, 68);
}

img
{
    border-style:none;
}

.vertlist li
{
   display:block;
   float:left;
   width:140px; 
   font-weight:bold;
   font-size:small;
   height:50px;
   list-style:none;
}

ul.vertlist li.submenu ul li {
   display: block;
   padding: 3px 8px;
   /*#E5F1FA*/
   background: rgb(252, 252, 252);
   border-style:solid;
   border-width:thin;
   border-color:rgb(242, 242, 242);
   color: #fff;
   text-decoration: none;
   font-size: small;
 }

ul.vertlist li.submenu ul li:hover {
    background-color: #E5F1FA;  
}

ul.vertlist li.submenu ul:hover {
    background-color: #E5F1FA;  
}

ul.vertlist li.crumblink.submenu:hover {
    background-color: #E5F1FA;
}

ul.corp-footer-local li.crumblink.submenu ul li:hover {
   background-color: #E5F1FA; 
}

a.crumblink:hover {
   background-color: #E5F1FA; 
}

ul.vertlist li ul 
{
    visibility: hidden;
}

ul.vertlist li.submenu:hover ul 
{
    display:block;
    position:relative;
    margin:0;
    padding:0;
    z-index:9999;
    visibility: visible;    
}

ul.vertlist li:hover ul, ul.vertlist li.hover ul {
   display: block;
   position: relative;
   margin: 0;
   padding: 0; 
}

ul.vertlist li:hover li, ul.vertlist li.hover li {
   float: none;
}

请参阅fiddle进行演示。

Answer 1

好的，让我们让您的代码更优雅，不用担心 - 只需几步即可。

首先，您的#corp-crumb上有保证金底部，将其删除。
通过在代码中添加ul.vertlist，从ul.vertlist ul和margin:0;删除特定于浏览器的边距。（标题也是如此，所以请注意）
从#recent-crumb
更改.vertlist li的高度，因为它比容器更大，并使#recent-crumb移到右侧。在您的情况下，高度应与容器相同 - height: 29px。
最后一件事是，通过向margin:0px;添加<body>来删除主体中特定于浏览器的边距。

PS。使用normalize.css可以避免特定于浏览器的填充和边距，例如<ul>和ul.vertlist li ul { visibility: hidden; }（我们已在第2点和第5点修复了此问题）。不要在div上使用负边距，它不是一个好的选择（而不是跨浏览器）。

JS小提琴：http://jsfiddle.net/aBzPv/5/

根据评论中的建议，从以下位置更改CSS：

ul.vertlist li ul {
   display:none;
}

到

visiblity:visible

然后从ul.vertlist li.submenu:hover ul移除{{1}}。这是更好的方法。

Answer 2

在Chrome中，打开您的开发工具。

然后在元素选项卡中。选择并悬停在＃corp-crumb。

现在，在右上方的面板中，您将div＃corp-crumb视为蓝色矩形，并在其下方显示橙色矩形。这是边距，您可以在右下方窗格中看到（具有相同的颜色架构）。左边的绿色是填充

enter image description here

Answer 3

20px值会导致#corp-crumb：

margin: 0px -12px 20px;

2个div之间的空白区域？

3 个答案: