フッター内の空きスペースを削除するにはどうすればよいですか？

Question

私のフッターでは、フッターのイメージとボトムボーダーの間の空きスペースを削除できません。

誰でも手伝ってもらえますか？ のように、<footer>上

.news-footer { 
 
    border-style: solid; 
 
    bottom: 0; 
 
    left: 0; 
 
\t 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>

Answer 1

display:blockを使用できます。

flexboxのような別の方法は、すべてのブラウザと互換性がありません。

IEでは、接頭辞-msが必要です。詳細はhereまたは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>

Answer 2

使用display: flex;（問題を理解するためにスニペットを参照してください）：

.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>

：

footer { 
    display: flex; 
} 

以下のスニペットを見てください

Answer 3

display: blockであなたのイメージを設定します。

.news-footer { 
 
    border-style: solid; 
 
    bottom: 0; 
 
    left: 0; 
 
\t 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>