为什么我的导航栏和我的旗帜之间有空白？

-1

出于某种原因，我将横幅和导航栏的边距设置为0，并且它们之间仍有空隙。我怎样才能解决这个问题？为什么我的导航栏和我的旗帜之间有空白？

CSS

.body 
{ 
margin-left: 200px; 
margin-right: 200px; 
margin-top: 50px; 
margin-bottom: 100px; 
} 




#page{ 
    width: 1000px; 
    margin-left: 0px; 
    margin-right: 0px; 
} 

.li_nav 
{ 
float: left; 
display:inline-block; 
} 

.nav 
{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
overflow: hidden; 
min-width: 1350px; 
} 

a:link, a:visited 
{ 
display:inline-block; 
width: 182.7px; 
padding-top: 12px; 
padding-right: 5px; 
padding-bottom: 12px; 
padding-left: 5px; 
font-weight: bold; 
color: #FFFFFF; 
background-color: #990000; 
text-align: center; 
text-decoration: none; 
font-family: 'proxima-nova', sans-serif; 
} 

a:hover, a:active 
{ 
background-color: #B20000; 
} 

.body 
{ 
height: 1350px; 
} 

.main_header 
{ 
text-align: center; 
padding-top: 5px; 
padding-right: 5px; 
padding-bottom: 15px; 
padding-left: 5px; 
font-family: 'proxima-nova', sans-serif; 
} 

.main_body 
{ 
padding-bottom: 100px; 
} 

.Team_Description 
{ 
font-size: 150%; 
font-family: 'proxima-nova', sans-serif; 
}

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" href="index_style.css"> 
<title>Team 3774 Homepage</title> 
</head> 
<body> 

<div id="page"> 
<div class="Banner"> 
<img src="/Images/Banner.png" height="200" width="1350"> 
</div> 

<div class="navbar"> 
<ul class="nav"> 
    <li><a class="li_nav" href="/Home">Home</a></li> 
    <li><a class="li_nav" href="/Team Bio">Team Bio</a></li> 
    <li><a class="li_nav" href="/Our Robot">Our Robot</a></li> 
    <li><a class="li_nav" href="/Our Coach">Our Coach</a></li> 
    <li><a class="li_nav" href="/Gallery">Gallery</a></li> 
    <li><a class="li_nav" href="/Outreach">Outreach</a></li> 
    <li><a class="li_nav" href="/Youtube">Youtube</a></li> 
</ul> 
</div> 
</div> 

<div class="body"> 
<h1 class="main_header">Welcome to Robotics Team 3774!</h1> 
<div class="main_body"> 
<p class="Team_Description">Hive Voltage 3774 is the Senior 
(and Junior) 
Engineering Team at Bayonne High School. The team 
is a part of the Senior Engineering class available 
at Bayonne High School. This team has the most experienced 
students for FTC. Many of them are highly capable students 
who had done various stem activities. We plan on learning 
several aspects of engineering this season but we also intend to 
have fun. 
Our main goal however is to grow as a team. We plan to grow 
as individuals and to collaborate as a unit or a team. 
Also, we plan to expose our community to the wonderful 
applications of robotics, and to excel in many parts of real 
engineering and real world applications. Hence we are, 
HIVE VOLTAGE 3774. #Hivevoltage #Gobees</p> 
</div> 
</div> 
</body> 
</html>

我建立了我的高中机器人小组的网站。该网站是robotichive3774.com

来源

2014-09-23 user3362546

垂直对齐的默认值为基准。将其更改为顶部。 – GeekByDesign 2014-09-23 20:00:11

因为内联元素的默认垂直对齐（在你的情况下，在横幅图像）是基线和你想顶：

.Banner img { 
    vertical-align:top; 
}

jsFiddle example

来源

2014-09-23 19:56:28 j08691

为什么不把图像设置为“块”来代替？ – disinfor 2014-09-23 20:11:12

@disinfor - 为什么要改变垂直对齐的显示属性？ – j08691 2014-09-23 20:24:03

好的电话。我真的好奇，希望它没有脱离挑战你的正确答案。 – disinfor 2014-09-23 20:27:01

以.Banner的风格尝试display:flex;。

http://jsfiddle.net/csdtesting/morpfLqh/1/

显示元件作为块级柔性容器。新的CSS3

来源

2014-09-23 19:57:03

这是因为你的图像上的高度：

<img src="/Images/Banner.png" height="200" width="1350">

来源

2014-09-23 19:57:46 sma

为什么我的导航栏和我的旗帜之间有空白？

回答

相关问题