html - 包装器未与页面顶部对齐
问题描述
我的包装和页面顶部之间有一个空格。我已经尝试了很多修复,但没有一个有效。背景图像覆盖了背景并与顶部对齐,但是具有另一个背景的包装器似乎有一个边距。
body {
height: 100vh;
background: url("https://i.imgur.com/HgflTDf.jpg") 50% fixed;
background-size: cover;
}
.wrap {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
min-height: 100%;
padding: 20px;
background: rgba(17, 71, 114, 0.85);
top: 0;
}
.login {
border-radius: 2px 2px 5px 5px;
padding: 10px 20px 20px 20px;
width: 90%;
max-width: 320px;
background: #ffffff;
position: relative;
padding-bottom: 80px;
}
input {
display: block;
padding: 15px 10px;
margin-bottom: 10px;
width: 100%;
border: 1px solid #ddd;
transition: border-width 0.2s ease;
border-radius: 2px;
}
input:focus {
outline: none;
color: #444;
border-color: 2196F3;
border-left-width: 35px;
}
.fa {
color: #fff;
font-size: 1em;
position: absolute;
margin-top: -47px;
opacity: 0;
left: 0;
transition: all 0.1s ease-in;
}
.fa:focus {
opacity: 1;
left: 30px;
transition: all 0.25s ease-out;
}
.tittel {
color: #444;
font-size: 1.2em;
font-weight: bold;
margin: 10px 0 30px 0;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.sub {
width: 100%;
height: 100%;
padding: 10px 10px;
background: #2196F3;
color: #444;
display: block;
border: none;
margin-top: 20px;
margin-bottom: 0px;
position: absolute;
left: 0;
bottom: 0;
max-height: 60px;
border: 0px solid rgba(0, 0, 0, 0.1);
border-radius: 0 0 2px 2px;
transform: rotateZ(0deg);
transition: all 0.1s ease-out;
border-bottom-width: 7px;
}
footer {
display: block;
padding-top: 50px;
text-align: center;
color: #fff;
font-weight: normal;
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
font-size: 0.8em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<div class="wrap">
<form action="" method="post" class="login needs-validation" novalidate>
<h4 class="tittel">Login</h4>
<input type="text" name="username" value="" placeholder="Username" required autofocus/>
<i class="fa fa-user"></i>
<input type="password" name="password" placeholder="Password" required>
<i class="fa fa-key"></i>
<input type="submit" class="sub" value="Login">
</form>
<footer>Company name</footer>
</div>
编辑:包装器似乎放置在顶部下方 30-40px 处。页面可以向下滚动到这个确切的长度。尝试删除 .wrap 中的填充,注释掉 body 的背景并在 Chrome 的站点检查器中播放,禁用和启用 css 以查看它是否有任何影响,但它没有。
解决方案
在大多数主流浏览器中,默认边距是8px
在所有边上。它由user-agent-stylesheet
您的浏览器提供的像素定义。
一些浏览器允许您创建和使用自己的user-agent-stylesheet
,但如果您正在开发一个网站,我建议您不要更改它,因为您的用户很可能不会有修改过的样式表,然后会看到与您不同的页面。
如果你想改变它,你可以这样做:
body {
margin: 0;
padding: 0;
...
}
但是如果你有一个大型项目并且想要更完整,请使用normalize.css。它重置了许多默认值以在浏览器之间保持一致。