张鑫旭的一篇文章，讲到20像素图标对齐和表单元素40像素对齐有所收获，谢谢@张鑫旭 ，很多观点跟平时的处理方式不谋而合，一般来说，我处理图标如果临近的话都会使用同样宽高，然后使用inline-block比较多，表单输入框和按钮以line-height:21-22为准。然后超出的用padding来补充。
以下摘录部分原文中的实践代码。
1.图标和文字对齐
一般的图标和文字对齐HTML代码：
<p><i class="icon"></i>前端开发博客</p> <p><a href="javascript:" class="icon">删除</a>前端开发博客</p>
zxx的CSS代码：
p{line-height:20px; font-size:14px;}
.icon {
display: inline-block;
width:20px; height:20px;
background: ...;
white-space:nowrap;
letter-spacing: -1em;
text-indent: -99em;
color: transparent;
/* IE7 */
*text-indent: 0;
*zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '\3000');
}
.icon:before {
/* 伪元素插入空格文本 */
content: '\3000';
}
这个代码主要是通过line-height来控制图标的文字和临近的文字同样行高，实现在同一行中。
2.表单输入框和内容对齐
简单的一个文字和文本输入
<div class="clearfix mt15"> <label class="left">手机号<span class="red abs">*</span></label> <div class="cell"> <input type="tel" class="ui_input" name="tel" required=""> </div> </div>
CSS代码：
body{font:14px/1.42858 'microsoft yahei', arial, sans-serif; -webkit-font-smoothing: antialiased; } /*行高为20像素*/
.cell {
display: table-cell;
*display: inline-block;
width: 2000px;
*width: auto;
}
input.ui_input,
.ui_input > input {
height: 20px;
line-height: 20px;
padding: 9px 8px;
border: 1px solid #d0d0d5;
border-radius: 4px;
background-color: #fff;
font-size: 14px;
outline: none;
color: #545a6c;
-webkit-transition: border-color .15s, background-color .15s;
transition: border-color .15s, background-color .15s;
}
更多例子请看demo:http://www.zhangxinxu.com/study/201511/form-use-mpqq.html
参考文章：以20像素为基准的CSS网页布局实践分享
