Only img in h1(h2, h3...) example.

by kanonji

HTML

<h1>Only img in h1(h2, h3...) example.</h1>
<p>* h1 is outlined with black line.</p>

<h1 class="good">line-height, vertical-align</h1>
<p>
    line-height:0; for h1.<br />
    vertical-align: bottom; for low img.
</p>
<h1 class="wrapper line-height">
    <img src="http://kanonji.info/dummyimage/320x10/ccc/fff.png" class="bottom" />
</h1>

<hr />

<h1 class="bad">Low img in h1</h1>
<h1 class="wrapper">
    <img src="http://kanonji.info/dummyimage/320x10/ccc/fff.png"/>
</h1>

<h1 class="bad">High img in h1</h1>
<h1 class="wrapper">
    <img src="http://kanonji.info/dummyimage/320x100/ccc/fff.png"/>
</h1>

<h1 class="bad">vertical-align only for low img</h1>
<p>vertical-align: bottom; for low img.</p>
<h1 class="wrapper">
    <img src="http://kanonji.info/dummyimage/320x10/ccc/fff.png" class="bottom" />
</h1>

<h1 class="better">vertical-align only for high img</h1>
<p>vertical-align: bottom; for high img.</p>
<h1 class="wrapper">
    <img src="http://kanonji.info/dummyimage/320x100/ccc/fff.png" class="bottom" />
</h1>

<h1 class="better">line-height only</h1>
<p>line-height: 0; for h1.</p>
<h1 class="wrapper line-height">
    <img src="http://kanonji.info/dummyimage/320x10/ccc/fff.png" />
</h1>

CSS

h1.wrapper{outline: 1px solid #333;}

img.bottom{vertical-align: bottom;}

h1.line-height{line-height: 0;}

.good{color: #3c3;}
.better{color: #cc3;}
.bad{color: #c33;}
.good:before, .better:before, .bad:before{
    display: inline-block;
    margin-right: .6rem;
    padding: 0 .3rem;
    line-height: 1.3rem;
    vertical-align: middle;
    font-size: 0.5rem;
    color: #fff;
}
.good:before{
    content: "good";
    background: #3c3;
}
.better:before{
    content: "better";
    background: #cc3;
}
.bad:before{
    content: "bad";
    background: #c33;
}