利用inline-block基线原理的小图标对齐

HTML

<div class="box">
    <h4>1. 空标签后面跟随文本</h4>
    <p><i class="icon icon-delete"></i> 删除</p>
    <h4>2. 标签里面有“删除”文本</h4>
    <p><i class="icon icon-delete">删除</i> 随便什么文字</p>
    <h4>3. 字号变大</h4>
    <p class="large"><i class="icon icon-delete"></i> 删除</p>
    <p class="large"><i class="icon icon-delete">删除</i> 随便什么文字</p>
</div>
					    

CSS

.box {
    display: inline-block;
    text-align: left;
    line-height: 20px;
}
.box h4 { color: gray; }
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    white-space: nowrap;
    letter-spacing: -1em;
    text-indent: -999em;
}
.icon:before { content: '\3000'; }
.icon-delete { background: url(delete.png) no-repeat center; }

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) {
.icon-delete {
    background-image: url(delete@2x.png);
    background-size: 16px 16px;
}
}
.large { font-size: 20px; }
				    

JS

//no