How can I remove an empty space in a footer?

Question

In my footer I can't remove the empty space between image and bottom border of footer.

Can anyone help me? (See snippet for understand the problem)

.news-footer {
  border-style: solid;
  bottom: 0;
  left: 0;
 position: fixed;
  right: 0;
  
 }

.image-footer {
  height: 100%;
  width: 100%;
  
}

<footer class="news-footer">
<img class="image-footer" src="http://oi66.tinypic.com/wgwbpi.jpg" alt="Download App"/>
</footer>

set the image class display:block; margin:0 auto; width:100%; height:auto; This make your image also responsive. [ https://jsfiddle.net/wkncsxq9/ ] — Baezid Mostafa, Dec 05 '16 at 15:35

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

You can use display:block.

Another method like flexbox is not compatible with all browsers.

In IE you need use -ms prefix. Learn more here or here.

.news-footer {
  border-style: solid;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  
 }

.image-footer {
  height: 100%;
  width: 100%;
  display:block;
  
}

<footer class="news-footer">
<img class="image-footer" src="http://oi66.tinypic.com/wgwbpi.jpg" alt="Download App"/>
</footer>

score 1 · Answer 2 · answered Dec 05 '16 at 15:30

Use display: flex; on <footer>, like:

footer {
  display: flex;
}

Have a look at the snippet below:

.news-footer {
  display: flex;
  border-style: solid;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
 }

.image-footer {
  height: 100%;
  width: 100%; 
}

<footer class="news-footer">
<img class="image-footer" src="http://oi66.tinypic.com/wgwbpi.jpg" alt="Download App"/>
</footer>

Hope this helps!

score 1 · Answer 3 · answered Dec 05 '16 at 15:30

Set your image with display: block.

.news-footer {
  border-style: solid;
  bottom: 0;
  left: 0;
 position: fixed;
  right: 0;
  
 }

.image-footer {
  height: 100%;
  width: 100%;
  display: block;
  
}

<footer class="news-footer">
<img class="image-footer" src="http://oi66.tinypic.com/wgwbpi.jpg" alt="Download App"/>
</footer>

How can I remove an empty space in a footer?

3 Answers3