Mind the Gap…Mind the Gap!

Jérôme Victor Toulouse

Published in

Launch School

4 min readMar 26, 2018

On the Front-End

PROBLEM

Not a BIG problem but you cannot understand why there is this little gap under your image…

The problem results from this piece of code :

An <img> element is in a <figure> parent element whom background color is yellow.

SOLUTIONS ?

Here we are :

Look at the code below, they are multiple ways you can solve this issue. You just have to uncomment one of these solutions in figure selector or in img one:

If you want to understand why these solutions resolve your problem, I could help you too.

BASIC EXPLANATIONS

<img src=”#” /> is an inline element. According to the box model, a horizontal inline box is created to store the content.

Inline elements mainly deal with text. So, even if there is no text, the image will be treated as a text.

However, in typography, any text is based on what is called a BASELINE (red line in the schema below) — you can figure that this baseline corresponds to the line in a school notebook.

As you can observe, below the baseline, there is a descender space that has a descender height in order to contain the descent of a letter (the letter ‘p’).

That ‘s why a gap is dug under your image! And yes, that’s its descender space… But of course, in case of an image, it is quite useless.

Now, you can easily understand some of the solutions provided above: the modification of the font-size or line-height for the <figure> element, which a priori is not self-evident. By setting the value to 0 for one on these attribute, the descent space doesn’t exist anymore.

In this case, be careful not to use em’s in the child elements of <figure> as by inheritance the default value would be 0.

MORE EXPLANATIONS

Perhaps you’re wondering :

what is exactly the size of the gap between my image and the bottom of the <figure> element?

With the previous explanations, we clearly saw that the dimension of the gap is relative to the font size and the line-height for this font.

Therefore, at first sight, it seems a straightforward answer. For example, if the parent font-size attribute is 48px, then the gap should be a defined fraction of this size, let’s say around 20%. The gap, in this case, can be computed to around 9–10px.

But….

In fact, it depends on the font itself.

The content area (sprayed with the coral color) is calculated differently according to the font. (see here)

The descent space of the letter ‘p’ for Helvetica or Catamaran looks quite the same in either font. However, the space reserved is not comparable.

The baseline is still the same for our three fonts. The image is based on it. But the gap is set according to the font that reserved the most space.

Consequences?

None if you don’t add some text next to your image.

But if it is the case, the solutions provided above will not give the same result.