2格之間有空白？
[英]white space between 2 divs?
問題描述
我有兩個div，並且在這兩個div之間是某種似乎無法擺脫的空白。 如果有幫助，這里是jsfiddle： http : //jsfiddle.net/aBzPv/1/
基本上，一個div是頁面頂部的菜單（垂直列表）。 我想直接在它下面為“最近的項目”創建另一個div。 我注意到我的第一個div（corp-crumb）和第二個div（recent-crumb）之間有太多空白：
<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;
}
參見小提琴進行演示。
3 個解決方案
解決方案1
3 已采納 2014-04-28 17:30:54
好的，讓我們使代碼更加優雅，不用擔心-只需走幾步。
- 首先，在
#corp-crumb底部留有邊距，將其刪除。 - 通過添加
margin:0;從ul.vertlist和ul.vertlist ul刪除瀏覽器特定的邊距margin:0;您的代碼。 （標題也是如此，因此請注意） - 從
#recent-crumb移除margin-top - 更改
.vertlist li高度，因為它比容器的高度大，並使您的#recent-crumb移到右側。 高度應與容器相同，在您的情況下height: 29px。 - 最后，通過添加
margin:0px;從正文中刪除特定於瀏覽器的頁邊距margin:0px;對此。
PS。 使用normalize.css可以避免特定於瀏覽器的填充和空白，例如<body>和<ul> （我們已經在第2點和第5點中對此進行了修復）。 不要在div上使用負邊距，這不是一個很好的選擇（也不是跨瀏覽器）。
JS小提琴： http : //jsfiddle.net/aBzPv/5/
如注釋中所建議，將CSS從以下位置更改：
ul.vertlist li ul {
visibility: hidden;
}
至
ul.vertlist li ul {
display:none;
}
然后從ul.vertlist li.submenu:hover ul刪除visiblity:visible 。 這是更好的方法。
解決方案2
2 2014-04-28 17:38:25
在Chrome中，打開您的開發工具。
然后在元素標簽中。 選擇並懸停在＃corp-crumb上。
現在，在右上方的面板中，您將div＃corp-crumb視為一個藍色矩形，在其下方是一個橙色矩形。 正如在右下窗格（具有相同的顏色架構）中所看到的那樣，這是空白。 左側的綠色正在填充
解決方案3
0 2014-04-28 17:33:03
20px值導致#corp-crumb ：
margin: 0px -12px 20px;
刪除div之間的空白
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.