Question

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

Answer 1

因为内联元素的默认垂直对齐方式（在您的情况下是横幅中的图像）是基线并且您想要顶部：

.Banner img {
    vertical-align:top;
}

<强> jsFiddle example

Answer 2

以display:flex;样式尝试.Banner。

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

将元素显示为块级Flex容器。 CSS3中的新功能

Answer 3

这是因为你的影像高度：

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

为什么导航栏和横幅之间有余量？

3 个答案: