0

I get a space between my wrapper and the top of the page. I've tried a lot of fixes, but none that works. The background image covers the background and is aligned to the top, but the wrapper, which has another background, seems to have a margin..

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>

EDIT: The wrapper seems to be placed 30-40px below the top. The page can be scrolled down this exact length. Tried removing the padding in the .wrap, comment out the background for the body and played around in site inspector for Chrome, disabling and enabling css to see if any of it makes a difference, which it doesn't.

Benjamin Sellevoll
  • 54
  • 7
  • You have the white background on the form, but the .wrap container has 20px padding … did you misinterpret that as “extra spacing” …? – 04FS Feb 25 '19 at 15:22
  • @04FS What do you mean? The .wrap is just the flex container, the reason for the 20px padding is so the children don't hit the sides of the screen if it's a smaller screen. The wrap container is supposed to have top: 0; but the visual is that it's like 30-40px below that. It wouldn't be a problem if it didn't have a background, but it does.. – Benjamin Sellevoll Feb 26 '19 at 08:26
  • Looks like you owe us a proper example to begin with then, because the snippet you have shown here does not seem to reproduce the behavior you shown on the screenshot in comments. – 04FS Feb 26 '19 at 08:36
  • Possible duplicate of https://stackoverflow.com/questions/9691771/why-is-65279-appearing-in-my-html – 04FS Feb 26 '19 at 10:41
  • @04FS Yes, it is. Just fixed it with Notepad ++ encoding it in UTF-8 without BOM. Thank you for being helpful. – Benjamin Sellevoll Feb 26 '19 at 10:46

3 Answers3

0

In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.

Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.

If you want to change it, you can just do this:

body {
  margin: 0;
  padding: 0;
  ...
}

But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.

Credits to Jon Egeland

Douwe de Haan
  • 6,247
  • 1
  • 30
  • 45
0

You have 20px padding in your wrap class, removing it will probably solve your issue - enter image description here

Hope this is what you're looking for!

Deme7rius
  • 94
  • 4
  • Nope, this did not solve it, since padding is from the edge and inwards. While margin is from the edge and outwards, but there are no margins either. – Benjamin Sellevoll Feb 26 '19 at 08:18
  • Can you attach an image of what you're aiming at, because I think I didn't get the question right? – Deme7rius Feb 26 '19 at 08:23
  • @BenjaminSellevoll the example snippet you have given here does not seem to match what that screenshot shows. – 04FS Feb 26 '19 at 08:35
  • @04FS It's literally copy paste, but I've changed the static text for language and corporate purposes. It got edited a bit by moderators, not sure if that's what you mean by not exactly the same. Goign over it now to check if there are any major differences of the actual page and the code provided. – Benjamin Sellevoll Feb 26 '19 at 08:56
  • @04FS Didn't find any major differences, just the color in the code example for input:focus should have a # in front, but that's irrelevant. – Benjamin Sellevoll Feb 26 '19 at 09:09
  • So you see the same thing you are talking about with the snippet here then? Screenshot? – 04FS Feb 26 '19 at 09:10
  • @04FS Yes. I think I found the attribute causing the space: https://imgur.com/a/PJu8WoS This is not included in the html, but shows up in the inspector of Chrome – Benjamin Sellevoll Feb 26 '19 at 10:30
0

This works for me just fine, no padding needed:

.page-wrap {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: left;
    overflow: hidden;
    margin: 0 auto;
}
juji_ni
  • 1