Gap appearing when resizing image in browser

Question

I have a small section in the mobile version of my website with 50-50 image/text format which looks and functions as I want, but when I resize the browser a small gap appears at the bottom of the images.

I have tried everything but cannot figure out the issue (I am sure it is something minor I am staring right at). Closest I came was vertical-align: bottom; to the image but the gap just started appearing at the top instead.

 .mobilecontainer1 { display: block; width: 100%; float: left; box-sizing: border-box; } .mobilebox { float: left; width: 50%; overflow: hidden; line-height: 0; } .mobilebox img { width: 100%; } .mobiletextwrap { padding-top: 19%; } #mobilebox1 { background: black; color: white; } #mobilebox2 { background-color: white; color: black; } #mobilebox3 { background-color: black; color: white; } .mobileboxwrap { width: 100%; float: left; display: block; } #mobileboxwrap1 { background: black; color: white; height: 100%; overflow: hidden; } #mobileboxwrap2 { background: white; color: black; height: 100%; overflow: hidden; } #mobileboxwrap3 { background: black; color: white; height: 100%; overflow: hidden; } 

 <div class="mobileboxwrap" id="mobileboxwrap1"> <div class="mobilebox"> <img src="img/mobilebackground_3.png"> </div> <div class="mobilebox" id="mobilebox1"> <div class="mobiletextwrap"> <header> <h2>Info</h2> </header> </div> </div> </div> <div class="mobileboxwrap" id="mobileboxwrap2"> <div class="mobilebox" id="mobilebox2"> <div class="mobiletextwrap"> <header> <h2>Drinks</h2> </header> </div> </div> <div class="mobilebox"> <img src="img/mobilebackground_2.png"> </div> </div> <div class="mobileboxwrap" id="mobileboxwrap3"> <div class="mobilebox"> <img src="img/mobilebackground_1.png"> </div> <div class="mobilebox" id="mobilebox3"> <div class="mobiletextwrap"> <header> <h2>Music</h2> </header> </div> </div> 

Answer 1

只需设置img的display：块

 .mobilebox img { width: 100%; display: block;}