为什么元素上方的空格似乎没有边距或填充？

时间：2016-02-13 04:07:35

标签： html css css3 margin padding

我想知道为什么导航栏中的元素上方有空格？我检查了边距和填充，似乎没有问题，但我的#logo和#searchbox上面有一个很大的空间，这弄乱了我的布局，我怎么能摆脱元素之上的空间？

非常感谢！

这是我的代码：

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>

5 个答案:

答案 0 :(得分：2)

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

编辑：绝对定位的搜索表单似乎导致了问题。我做了以下更改，空间消失了：

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

答案 1 :(得分：2)

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

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

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

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

此外，有时如果我有空格问题，我会一起运行html，所以标签之间没有空格。为了使它看起来整洁，我在html标签的中间插入了回车符。

答案 2 :(得分：0)

您似乎需要重置/规范化您的CSS 

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

答案 3 :(得分：0)

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

html,body{
  margin:0;
  }

您还可以添加：

padding:0;

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

答案 4 :(得分：0)

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

相关问题
最新问题