即使我已经删除了 lower_content div 的填充和边距，我仍然在屏幕左侧看到这个薄薄的空白区域......就像有一个我无法在任何地方找到的无形边距.我的内容很好地到达了屏幕的右侧，但没有到达左侧。
请帮我找出问题...
HTML:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>My name here</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="styleForFullPage.css" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<div class="side_banner">
<nav>
<ul>
<li><a href="#" >HOME</a></li>
<li><a href="about_me_FP.html" >ABOUT ME</a></li>
<li><a href="portfolio_FP.html" >PORTFOLIO</a></li>
<li><a href="contact_me_FP.html" >CONTACT</a></li>
</ul>
<hr/>
</nav>
</div>
<div class="name_div">
<h1>My name here</h1>
</div>
<div class="lower_content">
<p>LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT!
<br/>
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT!
<br/>
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT! LOWER CONTENT!
LOWER CONTENT! LOWER CONTENT!
</p>
</div>
</html>
CSS:
@font-face {
font-family: comfortaa;
src: url(Comfortaa-Regular.ttf);
}
html {
background: url(meAndTheOcean.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.side_banner{
/*font-family: Tahoma, Verdana, Segoe, sans-serif;*/
font-family: comfortaa;
font-size: 18px;
font-style: normal;
font-variant: normal;
font-weight: 500;
line-height: 26.3999996185303px;
background-color:transparent;
float:left;
height:100%;
width: 150px;
margin: 0% 2% 2% 0%;
}
.side_banner nav ul{
width: 100%;
list-style: none;
list-style-type:none;
padding: 0;
}
.side_banner nav ul li{
}
.side_banner nav a:link, .side_banner nav a:visited{
color: white;
display:block;
text-decoration: none;
/*padding: 10px 25px;*/
padding: 10px;
}
.side_banner nav a:hover, .side_banner nav a:active, .side_banner nav .active a:link,
.side_banner nav .active a:visited{
text-decoration: none;
background-color: orange;
/*background-color: 1C6BA0;*/
text-shadow: none;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.main_content{
float: left;
margin: 1% 2% 2% 2% ;
width: 70%;
font-family: Tahoma, Verdana, Segoe, sans-serif;
color:white;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.name_div{
font-family:comfortaa;
color: white;
text-align: center;
width: 300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-110px 0 0 -150px;
}
.lower_content{
overflow: auto;
position: absolute;
top: 650px;
width:100%;
background-color:white;
overflow-x:hidden;
color:black;
font-size:20;
margin: 0% 0% 0% 0% ;
padding: 0;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
最佳答案
<body>有自己的margin的 8px默认情况下。
简单定义规则
body {
margin: 0;
}
或者，如评论中所述，对 body 使用集体规则和 html :
html, body {
…
}
关于html - 屏幕左侧的多余空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30251725/