Design From the Inside Out With CSS Min-Content

dabblet.css

/**
 * Design From the Inside Out With CSS Min-Content
 * http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent
 */

figure {
	border: 2px solid black;
	background: #cae9b8;
	margin: 0 auto 1em auto;
}
figure.mincontent {
	width: -moz-min-content;
	width: -webkit-min-content;
	width: -ms-min-content;
	width: -o-min-content;
	width: min-content;
}
figcaption, p {
	text-align: center;
	margin: 1rem;
}
figcaption {
	font-weight: bolder;
	font-size: 1.2rem;
}

dabblet.html

<figure>
	<img src="http://placekitten.com/400/200" alt="Cat picture. Durr.">
	<figcaption>Cat (inherent width)</figcaption>
	<p>A photo taken by Thomas Hawk on April 18, 2010 using a Canon EOS 5D Mark II.</p>
</figure>
<figure class="mincontent">
	<img src="http://placekitten.com/400/200" alt="Cat picture. Durr.">
	<figcaption>Cat (min-content width)</figcaption>
	<p>A photo taken by Thomas Hawk on April 18, 2010 using a Canon EOS 5D Mark II.</p>
</figure>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}