导航栏和徽标图形不会粘在一起

在我的导航栏顶部和我的徽标图形底部之间有一点点白色空白。我怎样才能让它们粘在一起？我是否缺少像标题或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

导航栏和徽标图形不会粘在一起

回答

相关问题