Unwanted space between divs when is added

Question

There is some space between #child divs. How can I make them stack perfectly without any gaps? There is no problem when I don't have the <img> in there. Also, there is a blue stripe under the image, which is part of the div, but I don't understand why it's showing.

I am not an expert on HTML or CSS. I am a beginner who is starting to pick it up for marketing reasons. Any help and/or advice is highly appreciated it!

#parent {
  max-width: 850px;
  margin: 0 auto;
  border: 10px solid black;
}
#child {
  background-color: blue;
  text-align: center;
  color: #eee;
  font-size: 56px;
}
img {
  width: 100%;
}

<div id="parent">
  <div id="child">
    <img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
  </div>
  <div id="child">
    <p>Div 2</p>
  </div>
  <div id="child">
    <p>Div 3</p>
  </div>
  <div id="child">
    <p>Div 4</p>
  </div>
</div>

Here is an image of my problem. https://i.stack.imgur.com/PnyvZ.jpg

Answer 1

try to set margin and padding to 0px in your paragraph that should solve your problem

Answer 2

Paragraphs have a margin by default, so just remove that. And to get rid of the line below the image, add vertical-align:top to your img rules:

#parent {
  max-width: 850px;
  margin: 0 auto;
  border: 10px solid black;
}
#child {
  background-color: blue;
  text-align: center;
  color: #eee;
  font-size: 56px;
}
img {
  width: 100%;
  vertical-align: top;
}
p {
  margin: 0;
}

<div id="parent">
  <div id="child">
    <img src="http://s3.amazonaws.com/letsrumbl-marketing/images/8c146690-f04b-4e60-89ca-5e2d979f5a16/HowToShare3.png" />
  </div>
  <div id="child">
    <p>Div 2</p>
  </div>
  <div id="child">
    <p>Div 3</p>
  </div>
  <div id="child">
    <p>Div 4</p>
  </div>
</div>