利用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 {
      line-height: 20px;
  }
  .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;
  }
  
  .large {
      font-size: 20px;
  }