我在页眉(红色(和下一个图形元素(蓝色(之间有一点空间。尽管我已经使用通用选择器将边距和填充设置为零，但为什么会出现这个空格？
*{
margin: 0px;
padding: 0px;
}
html
{
background-color: #DFE3E6;
}
body
{
background-color: #FFFFFF;
width: 960px;
height: 800px;
margin: 20px auto;
}
.firstheader
{
background-color:#CC1C0D;
height: 117px;
}
img{
height: 117px;
overflow: hidden;
}
.logofigure
{
display: inline-block;
height: 117px;
}
.tit_image{
background-color: blue;
width: 100%;
height: 200px;
}
nav
{
position: relative;
font-size: 19px;
font-weight: bold;
display: inline-block;
height: 40px;
overflow: visible;
left: 40px;
bottom: 35px;
}
.nav>li
{
list-style-type: none;
width: 130px;
text-align: center;
line-height: 35px;
float: left;
/*position: relative;
bottom: 60px;
left:100px;*/
}
.nav li a{
color:white;
text-decoration: none;
}
.About_us_sub
{
float: left;
background-color: #DFE3E6;
height: 145px;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
.About_us_sub li
{
list-style-type: none;
color: #CC1C0D;
text-decoration: none;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 20px;
margin-top: 0px;
width: 60x;
height: 15px;
}
.sub_second{
height: 32px;
/** we specify the height of this li to solve the problem of displaying sub list when hovering below the about_us item.
By default, the height of About us will take the length of the sub menu, so when we specify height then the about us box will
not expand**/
}
.sub_second:hover .About_us_sub{
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../CSS/General_Style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header class="firstheader">
<figure class="logofigure">
<img src="../HTML/complete/complete/vectacorp/images/logo.png">
</figure>
<nav>
<ul class="nav">
<li class="sub_first"><a href="">Home</a></li>
<li class="sub_second"><a href="">About Us</a>
<ul class="About_us_sub">
<li>OverView</li>
<li>History</li>
<li>Management</li>
<li>Career</li>
</ul>
</li>
<li class="sub third"><a href="">Solutions</a></li>
<li class="sub fourth"><a href="">Support</a></li>
<li class="sub fifth"><a href="">Contact US</a></li>
</ul>
</nav>
<figure class="tit_image">
</figure>
</header>
</body>
</html>空间被相对位置的<nav>占据。CCD_ 2定位的元件在正常流动中确实占据空间。
在下面的示例中，我将其更新为absolute定位，这在正常流中不占用空间。
* {
margin: 0px;
padding: 0px;
}
html {
background-color: #DFE3E6;
}
body {
background-color: #FFFFFF;
width: 960px;
height: 800px;
margin: 20px auto;
}
.firstheader {
background-color: #CC1C0D;
height: 117px;
}
img {
height: 117px;
overflow: hidden;
}
.logofigure {
display: inline-block;
height: 117px;
}
.tit_image {
background-color: blue;
width: 100%;
height: 200px;
}
nav {
position: absolute;
font-size: 19px;
font-weight: bold;
display: inline-block;
height: 40px;
overflow: visible;
left: 40px;
bottom: 35px;
}
.nav>li {
list-style-type: none;
width: 130px;
text-align: center;
line-height: 35px;
float: left;
/*position: relative;
bottom: 60px;
left:100px;*/
}
.nav li a {
color: white;
text-decoration: none;
}
.About_us_sub {
float: left;
background-color: #DFE3E6;
height: 145px;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
.About_us_sub li {
list-style-type: none;
color: #CC1C0D;
text-decoration: none;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 20px;
margin-top: 0px;
width: 60x;
height: 15px;
}
.sub_second {
height: 32px;
/** we specify the height of this li to solve the problem of displaying sub list when hovering below the about_us item.
By default, the height of About us will take the length of the sub menu, so when we specify height then the about us box will
not expand**/
}
.sub_second:hover .About_us_sub {
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../CSS/General_Style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header class="firstheader">
<figure class="logofigure">
<img src="../HTML/complete/complete/vectacorp/images/logo.png">
</figure>
<nav>
<ul class="nav">
<li class="sub_first"><a href="">Home</a></li>
<li class="sub_second"><a href="">About Us</a>
<ul class="About_us_sub">
<li>OverView</li>
<li>History</li>
<li>Management</li>
<li>Career</li>
</ul>
</li>
<li class="sub third"><a href="">Solutions</a></li>
<li class="sub fourth"><a href="">Support</a></li>
<li class="sub fifth"><a href="">Contact US</a></li>
</ul>
</nav>
<figure class="tit_image">
</figure>
</header>
</body>
</html>编辑：display: inline-block;也会在firefox上创建小的空白。
.logofigure {
/* display: inline-block; */
height: 117px;
}
这种差距是浏览器如何布置内联元素的结果，例如示例中的.logofigure和nav元素。由于它们是内联的，浏览器将它们视为文本行的一部分，将每个元素的底部定位在"；基线"；在文本中，在g、q、j等基线以下的字符的底部上方；文本"；以及CCD_ 7和CCD_。CCD_ 9元件位于"；下一行"；，因为它是块元素。这留下了一个小缺口。
为了解决这个问题，你可以告诉浏览器把这些元素放在"；文本"；(低于基线(，将其设置为vertical-align: bottom;:
.logofigure
{
vertical-align: bottom;
}
nav
{
vertical-align: bottom;
}
最终结果：
*{
margin: 0px;
padding: 0px;
}
html
{
background-color: #DFE3E6;
}
body
{
background-color: #FFFFFF;
width: 960px;
height: 800px;
margin: 20px auto;
}
.firstheader
{
background-color:#CC1C0D;
height: 117px;
}
img{
height: 117px;
overflow: hidden;
}
.logofigure
{
display: inline-block;
vertical-align: bottom;
height: 117px;
}
.tit_image{
background-color: blue;
width: 100%;
height: 200px;
}
nav
{
vertical-align: bottom;
position: relative;
font-size: 19px;
font-weight: bold;
display: inline-block;
height: 40px;
overflow: visible;
left: 40px;
bottom: 35px;
}
.nav>li
{
list-style-type: none;
width: 130px;
text-align: center;
line-height: 35px;
float: left;
/*position: relative;
bottom: 60px;
left:100px;*/
}
.nav li a{
color:white;
text-decoration: none;
}
.About_us_sub
{
float: left;
background-color: #DFE3E6;
height: 145px;
visibility: hidden;
opacity: 0;
transition: opacity 0.8s ease-in-out;
}
.About_us_sub li
{
list-style-type: none;
color: #CC1C0D;
text-decoration: none;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 20px;
margin-top: 0px;
width: 60x;
height: 15px;
}
.sub_second{
height: 32px;
/** we specify the height of this li to solve the problem of displaying sub list when hovering below the about_us item.
By default, the height of About us will take the length of the sub menu, so when we specify height then the about us box will
not expand**/
}
.sub_second:hover .About_us_sub{
visibility: visible;
opacity: 1;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../CSS/General_Style.css" rel="stylesheet">
<title>Document</title>
</head>
<body>
<header class="firstheader">
<figure class="logofigure">
<img src="../HTML/complete/complete/vectacorp/images/logo.png">
</figure>
<nav>
<ul class="nav">
<li class="sub_first"><a href="">Home</a></li>
<li class="sub_second"><a href="">About Us</a>
<ul class="About_us_sub">
<li>OverView</li>
<li>History</li>
<li>Management</li>
<li>Career</li>
</ul>
</li>
<li class="sub third"><a href="">Solutions</a></li>
<li class="sub fourth"><a href="">Support</a></li>
<li class="sub fifth"><a href="">Contact US</a></li>
</ul>
</nav>
<figure class="tit_image">
</figure>
</header>
</body>
</html>