CSS: what is causing this gap?

Question

At this page, around viewport width 870px, there is a gap that appears underneath each .program-image img:

How do I ensure each .program-image img is the height of each .program, or each .program is the height of each .program-image img?

Help appreciated.

Answer 1

<img> tag is inline-block element so you always need to define vertical-align for it. else make it block.

img {
  vertical-align: top;
}

or use this

img {
  display: block;
}

Answer 2

Maybe try:

height: 100%;

or

min-height: 100%;

on the image selector.

Answer 3

As the image height is dependant on its width, a gap is created because of this rule. To avoid this, I commonly add the image as a background image of a div, setting the background-size to cover (which makes the image cover the entire div).

First, remove the image tag and place the background image within the program-image div.

<div class="program">
   <div class="program-image" style="background-image:url('http://vmpersonal.com/wp-content/uploads/2017/02/program-pregnancy.jpg');">
        ...

Then I would go ahead to add the following css:

.program-image {
    height: 90px; // Or whatever height needed
    width: 45.23809523%;
    float: left;
    max-height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

This sets the height of the div as it will not take into account the height dimension of the image.

To make sure the image doesn't overflow over the program element. Add the following:

.program {
  overflow: hidden;
}

Below is an example of how it looks (Second program is of how it currently is, example excludes background-position:center apologies).

I hope this helps.