我偶然发现了一个非常烦人的问题。当我的元素在 1920px 和 1050px 之间查看时，一切正常，并且是我想要的方式。
当我将其调整到 1050 像素以下时，会出现一些奇怪的边距。
http://imgur.com/a/UFrz9
编辑:https://jsfiddle.net/5fj7336t/2/
我发现是 margin-left:60%; 导致了这个问题。
.bannerOverlay {
/*position*/
position: absolute;
width: 400px;
top: 350px;
margin-left: 60%;
padding: 10px; /*Readable text*/
color: white;
background-color: rgba(31, 31, 31, 0.5);
box-shadow: 0px 0px 20px black;
}
- 右侧的“边距”在检查元素工具中不显示为边距。
- 我正在使用浏览器重置模板。
- 即使正文的宽度为 100%，它仍会显示边距。
- 使用 SASS 生成我的 CSS。 (我怀疑这会造成任何麻烦)
下面是我的 CSS 代码和 HTML 代码。我希望有人能帮我删除这个边距。
body {
font-family: 'Lato', sans-serif;
background-color: white;
width: 100%;
}
header {
position: fixed;
z-index: 999; /*overlay ALL*/
width: 100%;
height: 100px;
top: 0; /*Stay. Away.*/
background-color: #1f1f1f;
}
header div {
padding: 20px 0px 80px 0px;
width: 800px;
display: block;
margin: 0 auto;
}
header h1 {
display: block;
float: left;
color: #e7e5e5;
font-size: 2.5em;
font-weight: bold;
}
header h2 {
display: block;
color: #BFBFFF;
font-size: 0.9em;
position: absolute;
margin-top: 40px;
margin-left: 20px;
}
header nav {
float: right;
}
header nav ul {
padding-top: 42px;
}
header nav ul li {
display: inline-block;
text-align: center;
margin-right: 5px;
margin-left: 5px;
}
header nav ul li a {
text-decoration: none;
color: #e7e5e5;
opacity: 0.6;
}
header nav ul li a:hover {
border-bottom: 5px solid #eeeeee;
padding-bottom: 2px;
opacity: 1;
transition: opacity 0.25s ease-in;
-moz-transition: opacity 0.25s ease-in;
-webkit-transition: opacity 0.25s ease-in;
}
header nav ul li.current a {
border-bottom: 5px solid;
padding-bottom: 2px;
opacity: 1;
}
.banner {
top: 0;
margin-top: 100px;
height: 700px;
width: 100%;
position: fixed;
background-image: url(../Images/banner.jpg);
background-position: center;
background-repeat: no-repeat;
opacity: 0.8;
z-index: -1;
}
.bannerOverlay {
/*position*/
position: absolute;
width: 400px;
top: 350px;
margin-left: 60%;
padding: 10px; /*Readable text*/
color: white;
background-color: rgba(31, 31, 31, 0.5);
box-shadow: 0px 0px 20px black;
}
.bannerOverlay h2 {
font-size: 3em;
padding-bottom: 10px;
}
.bannerOverlay p {
line-height: 1.2em;
}
.fadeFix {
margin-top: 700px; /*banner size*/
height: 100px; /*100px overlay*/
background-color: white;
z-index: 2;
background: -moz-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);/* FF3.6-15 */
background: -webkit-linear-gradient(bottom, white 0%, rgba(255, 255, 255, 0) 100%);/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to top, white 0%, rgba(255, 255, 255, 0) 100%);/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.content {
height: 500px; /*temp filler*/
background-color: white;
z-index: 2;
}
.content .whiteBoxContent .intelBox {
width: 500px;
margin: 0 auto;
}
.content .whiteBoxContent .intelBox h2 {
font-size: 3em;
padding-top: 20px;
padding-bottom: 20px;
display: block;
text-align: center;
}
.content .whiteBoxContent .intelBox p {
display: block;
width: 500px;
text-align: center;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<link href="../CSS/browser_reset.css" rel="stylesheet" type="text/css" />
<link href="../SO/css.css" rel="stylesheet" type="text/css" />
<title>title</title>
</head>
<body>
<header>
<div>
<!-- divbox-->
<h1>title</h1>
<h2>sub</h2>
<nav>
<ul>
<li class="current">
<a href="#">Home</a>
</li>
<li>
<a href="#">n1</a>
</li>
<li>
<a href="#">n2</a>
</li>
<li>
<a href="#">n3</a>
</li>
<li>
<a href="#">n4</a>
</li>
<li>
<a href="#">n5</a>
</li>
<li>
<a href="#">n6</a>
</li>
</ul>
</nav>
</div>
</header>
<section class="banner">
<!-- Fixed position -->
</section>
<section class="fadeFix">
</section>
<section class="content">
<div class="bannerOverlay">
<h2>title</h2>
<p>
content
</p>
</div>
<div class="whiteBoxContent">
<div class="intelBox">
<h2>title</h2>
<p>
content
</p>
</div>
</div>
</section>
</body>
</html>最佳答案
我在 body 中添加了 margin:0; 并且边距消失了(默认情况下，chrome 会向 body 元素添加 8px 边距 - 我不知道是不是在所有其他浏览器中)
编辑:将 overflow:hidden 添加到正文中(现在当我看到你的 jsfiddle 时)
关于html - 调整窗口大小会在 body 标签旁边创建边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33721494/