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

问题

I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?

Thanks a lot!

Here's my Code:

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>

回答1:

Your <nav> element has a padding of 10px.

EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:

#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;
}

回答2:

I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.

In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?

Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.

Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.

Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.

回答3:

By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use: