making a div "hug" its contained components [duplicate]

Question

If I have HTML that looks like this:

<div class="figure">
  <img src="some_image.png" />
  <div><span class="caption">Fig. 1: Some caption</span></div>
</div>

Is there a way to use CSS so that the div with class figure has a width that is only large enough to contain the image and caption? I want to put a rectangular border around both, but I don't want to have to guess the div's width in pixels.

example below (div.figure has a width that seems to expand to fill its available width)

div.figure { 
  border: 1px solid black; 
}

<div class="figure">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo-med.png?v=6f86a5fa447f" />
<div><span class="caption">Fig. 1: Some caption</span></div>
</div>

Answer 1

SOLUTION:

A <div> is a block-level element (Same as HTML5 figure tag). So you need to specify you want an inline-block behavior adding the css property display: inline-block; to your figure.

---

CODE SNIPPET:

figure {
  border: 1px inset tomato;
  display: inline-block;
}

<figure>
  <img src="http://placehold.it/300x300" alt="my-photo"/>
  <figcaption>
    Fig. 1: Some caption
  </figcaption>
</figure>

---

FURTHER READING:

How well do you know CSS display? by Chen Hui Jing - June 18, 2016

Display by Sara Cope - March 16, 2015