为什么在一个看起来没有边距或填充的元素上方有 space？

Question

我想知道为什么我的导航栏中的元素上方似乎有空白 space？我已经检查了边距和填充，似乎没有问题，但是我的 #logo 和 #searchbox 上面有一个很大的 space，这弄乱了我的布局，如何我可以去掉元素上面的 space 吗？

非常感谢！

这是我的代码：

li {
 display: inline-block;
}

ul {
 display: inline-block;
 margin: 0px;
 padding: 0px;
}

#main_nav, logo {
 display: inline-block;
 padding: 0px;
 margin: 0px;
}

nav li a:link {
 font-weight: bold;
 display: inline-block;
 text-decoration: none;
 font-family: times;
 font-size: 24px;
 list-style: none;
 padding: 5px;
 border: 2px solid black;
 border-radius: 5px;
 color: black;
}

nav li a:visited {
 color: rgba(0,0,0,0.7);
}

nav li a:hover {
 background-color: rgba(0,0,0,0.6);
 color: white;
}

nav li a:active {
 color: black;
 border-color: black;
}

nav {
 width: 1000px;
 height: 130px;
 background-color: rgba(255,255,255,0.7);
 padding: 10px;
 margin: 0px auto;
 border-bottom-left-radius: 10px;
 border-bottom-right-radius: 10px;
}

input[type=search] {
 font-size: 16px;
}

#searchbox {
 position: absolute;
 right: 0px;
 top: 0px;
}

#searchbox_div {
 position: relative;
 display: inline-block;
 padding: 0;
 width: 100%;
}

#logo {
 display: inline-block;
 width: 200px;
 font-family: arial;
 margin: 0px;
 padding: 0px;
 font-size: 26px;
}

#logo_jeff, #logo_arries, #logo_website {
 margin: 0px;
}

#logo_jeff {
 letter-spacing: 35.5px;
}

#logo_arries {
 letter-spacing: 11px;
}

#logo_website {
 letter-spacing: 4px;
}










#main_content {
 width: 1000px;
 min-height: 600px;
 display: block;
 background-color: rgba(255,255,255,0.7);
 margin: 0 auto;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
 position: relative; top: 0px;
 padding: 10px;
}

#here_you_can_learn {
 font-size: 47px;
 color: gray;
 margin: 0 auto;
 margin-bottom: 10px;
 text-align: center;
}


#welcome {
 text-align: center;
 color: rgb(0, 0, 110);
 font-size: 100px;
 margin: 0;
padding: 10px 10px 20px 10px;
}

#down_arrow {
 height: 50px;
 margin: auto;
 display: block;
 padding: 10px;
}

#most_frequent {
 width: 600px;
 vertical-align: top;
 display: inline-block;
 background-color: rgba(0,0,0,0.1);
 border-radius: 3px;
}

#m_f_heading {
 font-size: 30px;
 margin: 10px;
 padding: 5px;
 text-align: center;
 background-color: rgba(0,0,0,0.2);
 border-radius: 5px;
}



#m_f_show_more {
 font-size: 20px;
 margin: 10px;
 padding: 5px;
 text-align: center;
 background-color: rgba(0,0,0,0.2);
 border-radius: 5px;
}


#recent_activity {
 width: 375px;
 display: inline-block;
 background-color: rgba(0,0,0,0.1);
 border-radius: 3px;
}

#r_a_heading {
 font-size: 30px;
 margin: 10px;
 padding: 5px;
 text-align: center;
 background-color: rgba(0,0,0,0.2);
 border-radius: 5px;
}

#r_a_body {
 font-size: 15px;
 margin: 10px;
 padding: 5px;
 text-align: center;
 background-color: rgba(0,0,0,0.2);
 border-radius: 5px;
}

#r_a_show_more {
 font-size: 20px;
 margin: 10px;
 padding: 5px;
 text-align: center;
 background-color: rgba(0,0,0,0.2);
 border-radius: 5px;
}

#r_a_show_more_link:visited {
 color: black;
}

#r_a_show_more_link:hover {
  color: gray;
  background-color: rgba(0,0,0,0.9);
}

#r_a_show_more_link:active {
  color: black;
}










body {
    background-image: url("../pictures/jeff_skiing.jpg");
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 min-height: 500px;
 margin: 0px;
 padding: 0px;
}

aside {
 position: absolute;
 right: 0px;
 background-color: rgba(255,255,255,0.9);
 width: 170px;
 height: 600px;
 margin: 0;
 border-top-left-radius: 10px;
 border-bottom-left-radius: 10px;
 padding: 10px;
}

<!DOCTYPE html>

<head>
<title>Home | Jeff's Website</title>

<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />

</head>


<body>

<!--Main Nav-->
<header>
 <nav>
  <div id="searchbox_div">
   <form action="" id="searchbox">
    <input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
    <input type="submit" value="Search!">
   </form>
  </div>
  
  <div id="logo">
   <h1 id="logo_jeff">JEFF</h1>
   <h1 id="logo_arries">ARRIES</h1>
   <h1 id="logo_website">WEBSITE</h1>
  </div>
  
  <div id="main_nav">
   <ul>
    <li><a href="">Home</a></li>
    <li><a href="">Blog</a></li>
    <li><a href="">Trips</a></li>
    <li><a href="">Politics</a></li>
    <li><a href="">Pictures</a></li>
    <li><a href="">Videos</a></li>
    <li><a href="">Computer</a></li>
    <li><a href="">Misc</a></li>
   </ul>
  </div>
 </nav>
</header>


<!--Welcome to jeff's website-->

<div>
 <h2 id="welcome">Welcome to my Website!</h1>
 
 <a href="#here_you_can_learn">
 <img src="pictures/down_arrow.png" id="down_arrow"/>
 </a>
</div>

<!--right side nav-->

<aside>
 <p>this is aside</p>

</aside>


<!--Main Content-->

<div id="main_content">
 <h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>

<!--Most Frequently visited pages: on left side of page-->
 <div id="most_frequent">
  <p id="m_f_heading">Most frequently visted pages!</p>
  
  
  
  <a href=""><p id="m_f_show_more">Show More</p></a>
 
 </div>
 
<!--Recent Activity: on the right side of page-->
 <div id="recent_activity">
  <p id="r_a_heading">Recent Activity</p>
  
  
  <p id="r_a_body">test</p>
  
  
  <a href="" id="r_a_show_more_link"><p id="r_a_show_more">Show More</p></a>
 </div>

</div>

</body>

Answer 1

你似乎需要 reset/normalize 你的 css 因为

html,body{
  margin:0;
  padding:0;
  }

Answer 2

默认情况下，大多数浏览器都有 8 像素左右的边距，这些边距是内置的或 "Added" 页面样式。消除这种情况的超级简单方法是通过 CSS。只需使用：

html,body{
  margin:0;
  }

您还可以添加：

padding:0;

如果它仍然给您带来问题！

Answer 3

<nav> 元素配置为在所有边上有 10 个像素的填充。

Answer 4

您的 <nav> 元素的填充为 10px。

编辑： 绝对定位的搜索表单似乎是问题所在。我进行了以下更改，space 消失了：

#searchbox_div {
    position: relative;
    display: block;
    padding: 0;
    width: 100%;
}
#searchbox {
    position: relative;
    float: right;
}
#logo {
    display: inline-block;
    width: 200px;
    font-family: arial;
    margin: 0px;
    padding: 0px;
    font-size: 26px;
    float: left;
}
#main_nav{
    display: inline-block;
    padding: 0px;
    margin: 0px;
    margin-top: 4em;
    margin-left: 1em;
}

Answer 5

我注意到您没有使用 css 重置。 CSS 重置（或“重置 CSS”）是一组简短的、通常压缩（缩小）的 CSS 规则，可将所有 HTML 元素的样式重置为一致的样式基线。

如果你不知道，每个浏览器都有自己默认的“用户代理”样式表，它用来使无样式的网站看起来更清晰。例如，大多数浏览器默认将链接设置为蓝色，将已访问的链接设置为紫色，为表格提供一定量的边框和填充，将可变字体大小应用于 H1、H2、H3 等，并对几乎所有内容应用一定量的填充。有没有想过为什么提交按钮在每个浏览器中看起来都不一样？

显然，这给 CSS 作者带来了一定程度的麻烦，他们无法弄清楚如何使他们的网站在每个浏览器中看起来都一样。

使用 CSS Reset，CSS 作者可以强制每个浏览器将其所有样式重置为 null，从而尽可能避免跨浏览器差异。

此外，有时如果我遇到空格问题，我会将运行和 html 放在一起，这样标签之间就没有空格了。为了使它看起来整洁，我在 html 标记的中间插入回车符 returns。

为什么在一个看起来没有边距或填充的元素上方有 space？

Why is there space above an element that appears to have no margin or padding?

html

css

margin

padding