CSS generates a blank space

Navigation
2

I am making a web page, in this case the layout , and I have a problem with the CSS since this generates a small blank space between the background ("wallpaper") and the footer . The code is as follows: 

* {
margin: 0;
padding: 0;
font-family: sans-serif;
}

a {
text-decoration: none;
color: inherit;
}

.header {
width: 100%;
height: 60px;
background-color: #333;
display: flex;
align-items: center;
color: #FFFFFF;
}

.logo {
height: 40px;
width: 200px;
padding: 0px 50px 0px 50px;
fill: #000;
}

.input_query {
flex-basis: 25%;
height: 18px;
border: 1px solid #282828;
border-radius: 3px;
padding: 5px;
}

.log_in {
margin-left: auto;
color: #DCDCDC;
}

.log_in_btn {
background-color: #3F3F3F;
margin: 0px 50px 0px 0px;
padding: 5px;
border: 1px solid #282828;
border-radius: 2px;
}

.wallpaper {
width: 100%;
height: 100%;
}

footer {
width: 100%;
height: 100px;
background-color: #333;
}
<body>
    <header class="header">
        <a href=""><img class="logo" src="assets/images/logo-web.png"></a>
        <input class="input_query" placeholder="Search...">
        <section class="log_in">
            <a href="" class="log_in_btn">Sing in</a>
            <a href="" class="log_in_btn">Create an account</a>
        </section>
    </header>
    <img src="assets/images/wallpaper.png" class="wallpaper">
    <footer>Footer</footer>
</body>
    
asked by Raúl 13.12.2016 в 19:01
source

4 answers

2

The famous mysterious space turns out to be because of the strict and modern DOCTYPE .

Let's see some examples with this piece of code: 

<table border="1">
  <tbody>
    <tr>
      <td>
        <img src="http://placehold.it/350x150">
      </td>
    </tr>
  </tbody>
</table>

If we have a doctype: HTML 4.01 Transitional we can see that everything is in order:

View Demo

Now ... If we use a DOCTYPE strict HTML 4.01 Strict or modern HTML5 :

View Demo

We see that now a space appears between the image and the edge!

If we read a bit about Mozilla Foundation about hollows mysterious, tells us:

  

As of 2001 and the rise of compliant browsers showing   the pages using HTML and CSS instead of their own algorithms   design, and because of a little known detail of the specification of   CSS, all design based on layout with tables and images   Spacers has become a visual disaster waiting to be   visited. All you need is a modern browser, a DOCTYPE   appropriate, and ... Boom!

Now we know where the issue comes from:)

There are several ways / tricks to solve it:

Conclusion:

Depending on your layout, one or another solution / trick for this problem may serve you. In your case you can use: display: inherit; , display: block; or display: flex;

Read more about recommendations Mozilla Foundation

    
answered by 13.12.2016 / 20:54
source
1

I'm not sure if it's a bug or a inline-block feature, but it's something that always happens. In your case you use an image that by default its value of display is inline-block , to solve it you can put display:block to the image and that's it, the space will disappear.

    
answered by 13.12.2016 в 19:31
0

Before answering you let me give you a tip and that is first do not put a <section> within a <header> for that there are the <div> . The sections are for the body of the HTML.

Now answering your question by default there is always a line between the sections and <footer> to remove this line add a margin-top: -3px in the footer, then it would be like this. 

footer {
    width: 100%;
    height: 100px;
    background-color: #333;
    margin-top: -3px;
    }
    
answered by 13.12.2016 в 19:29
0

I have already managed to solve it, I do not know why but the comment of the person who told me does not affect me. The solution was to add .wallpaper display: flex; but I do not understand why

    
answered by 13.12.2016 в 19:42
Search through a query Clear the cache depending on the view with $ ionicHistory.clearCache ()