html - 为什么我的导航栏和横幅之间有空白?

标签 html css

出于某种原因,我将横幅和导航栏的边距设置为 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>

我正在为我的高中机器人团队构建网站。该网站是 robothive3774.com

最佳答案

因为内联元素(在您的情况下是横幅中的图像)的默认垂直对齐方式是基线,而您想要顶部:

.Banner img {
    vertical-align:top;
}

jsFiddle example

关于html - 为什么我的导航栏和横幅之间有空白?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26003602/

相关文章:

javascript - 在另一个元素之后查找具有特定类/标签名称的第一个元素

javascript - 重复 Javascript 动画

css - Divs 在调整 CSS 大小时自动移动位置

javascript - 仅使用 CSS 更改按钮单击的背景?

javascript - 为什么这个递归函数会给我一个 "Maximum call stack size exceeded"错误?

JavaScript 函数未针对表单运行

javascript - 检查输入在每个类元素上是否具有值,然后切换禁用的类 jQuery

AJAX 成功函数上的 Javascript/AJAX 当前输入

Javascript/Jquery 如何捕捉 CSS 类的使用

html - chrome 中的列数问题