Search code examples
htmlcssfigure

Does figcaption not count as space inside a figure?

TL;DR: Yes, I was "missing something obvious". Sorry about that.

Putting an image inside a figure works fine, with all the borders nicely nesting:

No figcaption

But when I add a figcaption, the size of the image stays the same and overflows the figure:

With figcaption

It's like the "height: 100%" for the image takes 100% of the figure, ignoring the figcaption.

I get the same behaviour in both Firefox and Chrome.

Ignore any horizontal problems; I stripped out that code.

Is this really how it's supposed to behave, or am I missing something obvious?

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Stack Exchange Logo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
                * { box-sizing: border-box; border-style: solid; padding: .1em; }
                figure { height: 30em; width: 45%; }
                figure>img { width: auto; height: 100%; border-color: red; }
        </style>
</head>

<body>
<figure>
        <figcaption>Stack Exchange Logo</figcaption>
        <img alt="SE logo" src="https://pbs.twimg.com/profile_images/1213884858/apple-touch-icon_400x400.png" />
</figure>
</body>
</html>

Solution

  • It's because of your CSS units. em is equal to the current font-size. It's a scaleable unit but not what you want. Your parent should be allowed to scale as much as it wants according to the content inside it for responsiveness. See here 

    figure { height: 30em; width: 45%; }

    Your figure tag has a width, be it any, what you are doing wrong here is you are kind of sealing the tag. You are allowing it for a 45% width but limiting the height. And then you are doing this wrong.

    figure>img { width: auto; height: 100%; border-color: red; }

    Making the image scale to the full height. That's why because of the bounded-ness of your parent div and this image's height:100% you are seeing that the image is going out or it overflows the figure. You should allow the parent to scale independently and define a width to the child elements that alter the appearance.

    All that being said, taking everything in considerations, you get this 

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
        <title>Stack Exchange Logo</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <style>
                 * { box-sizing: border-box; border-style: solid; padding: .1em; }
                figure { height: auto; width: 45%; }
                figure>img { width: 100%; height: 100%; border-color: red; }
        </style>
</head>

<body>
<figure>
        <figcaption>Stack Exchange Logo</figcaption>
        <img alt="SE logo" src="https://pbs.twimg.com/profile_images/1213884858/apple-touch-icon_400x400.png" />
</figure>
</body>
</html>