How do I remove the white space between 2 divs [duplicate] - html

Question

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I have two divs that contain two pictures, but there is always this weird tiny blank space in between them. I tried setting the margins and paddings to 0 for both of the divs in css but it still doesn't work.
Here is my code:
#selector{
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
#break-1{
display: block;
margin: auto;
padding: 0;
width: 100%
height: 20px;
}
#break-1 img{
width: 100%;
}
<div>
<img src="http://placehold.it/350x150" alt="" id='selector'>
</div>
<div id="break-1">
<img src="http://placehold.it/350x150" alt="">
</div>

Answer 1

img is inline element and by default is vertical-align:baseline,
you could fix that two ways:
- add display:block
#selector {
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
#break-1 {
display: block;
margin: auto;
padding: 0;
width: 100%;
height: 20px;
}
img {
width: 100%;
display: block
}
<div>
<img src="//placehold.it/100" alt="" id='selector'>
</div>
<div id="break-1">
<img src="//placehold.it/100" alt="">
</div>
- add vertical-align:bottom
#selector {
width: 100%;
height: 100%;
margin-bottom: 0;
padding: 0;
}
#break-1 {
display: block;
margin: auto;
padding: 0;
width: 100%;
height: 20px;
}
img {
width: 100%;
vertical-align: bottom
}
<div>
<img src="//placehold.it/100" alt="" id='selector'>
</div>
<div id="break-1">
<img src="//placehold.it/100" alt="">
</div>