How do I remove the white space between 2 divs

Question

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>