html - Div tag respond (height) to image inside it

Question

I'm generally new to responsive web design and am trying to make a video site template. When I make the wave graphic responsive in the div tag the width works perfectly. However the height leaves a gap between the image (as if the height isn't responding base don the width) and the div tag and showing the background color red of the 'wave1' div.

You can see it here on jsFiddle on any screen size.

Any idea how to fix this???

Here is my code:

<div id="wave1">
    <img src="images/wave1.jpg" alt="wave 1">
</div><!--wave1-->

#wave1 {
    background-color:#C31619;
    width: 100%;
    height: inherit;
    padding: 0;
    margin: 0;
}

#wave1 img {
    width: 100% 
}

Answer 1

The red line you are seeing is the space between tags being rendered as text, and therefore taking up the equivalent space of a single character in the document flow. Simply set the font-size on the container to 0, then to 1rem (the value of the front size of the root element) on the children

(Demo)

#wave1 {
  background-color: #C31619;
  width: 100%;
  height: inherit;
  padding: 0;
  margin: 0;
  font-size: 0;
}
#wave1 * {
  font-size: 1rem;
}

Answer 2

I've played with this for a while now and literally cannot see a reason as to why this is happening.

Giving

#wave1 { margin-bottom:-4px; }

works, but is certainly not the best fix as the gap is not being caused by margin and may simply break again in future.

Answer 3

The gap between the red bottom of the wave div and the video is caused by the padding on your "outer" div. You have:

.outer {
  padding-top: 1%;
...
}

To remove the gap, remove that padding.

https://jsfiddle.net/oxn6zLar/

Answer 4

The height: inherit line is not necessary.

try adding display: block to your img's css.

The default display value for HTML img tags is inline, meaning that the image is rendered inline with text, and is given a line-height value, which causes the blank space underneath the image to appear (due to difference between the image height and the line height).

Another workaround would be to set vertical-align: bottom on the img element so that the difference between the line-height and the image height will be on top of the image.