導航欄和徽標圖形不會粘在一起

在我的導航欄頂部和我的徽標圖形底部之間有一點點白色空白。我怎樣才能讓它們粘在一起？我是否缺少像標題或nav？也許我錯過了一個聲明？導航欄和徽標圖形不會粘在一起

body { 
 
    background-color: #FFFFFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    text-align: center; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    display: inline-block; 
 
    border: 5px solid #0009bc; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
a:link, a:visited { 
 
    display: block; 
 
    width: 140px; 
 
    font-weight: bold; 
 
    color: #20dbd4; 
 
    background-color: #000000; 
 
    text-align: center; 
 
    padding: 12px; 
 
    text-decoration: underline; 
 
    text-transform: uppercase; 
 
} 
 

 
a:hover, a:active { 
 
    background-color: #20dbd4; 
 
    color: #000000; 
 
}

<!DOCTYPE html> 
 

 
<html> 
 

 
<head> 
 
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/> 
 
<meta name="robots" content="noindex, nofollow, noarchive"/> 
 
<title>Grid Design</title> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <img src="/images/grid-design.jpg" alt="Grid Design" style="width: 987px; height: 243px;"/> 
 
    </header> 
 
    <nav> 
 
    <ul> 
 
     <li><a href="#home">home</a></li> 
 
     <li><a href="#news">news</a></li> 
 
     <li><a href="#about">about</a></li> 
 
     <li><a href="#products">products</a></li> 
 
     <li><a href="#photos">photos</a></li> 
 
     <li><a href="#contact">contact</a></li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

來源

2014-10-16 NightSpark

你需要的，如果我們要看到實際的問題，在您的示例使用實際的圖像，但你可以嘗試設置圖像顯示'：塊' – 2014-10-16 11:31:36

顯示原始問題，請嘗試發佈小提琴演示和屏幕截圖 – Aru 2014-10-16 11:35:42

http://s27.postimg.org/nxvxbowb7/screenshot.png – NightSpark 2014-10-16 11:36:32

只需聲明圖像爲display:block然後根據需要居中。

默認情況下，圖像爲display:inline，這意味着它受到whitespace的影響...使圖像變成塊元素可以解決問題。

JSfiddle Demo

CSS

header img { 
    display: block; 
    margin: 0 auto; 
}

來源

2014-10-16 11:58:53

-1

你可以設置導航的保證金至-4這樣：

CSS：

nav { 
    margin: -4px 0 0 0; 
}

但這不是唯一的方法..實際上這應該是你的最後一招！有幾個更好的方法來做到這一點。

來源

2014-10-16 11:47:51 Arty

導航欄和徽標圖形不會粘在一起

回答

相關問題