因为微群等级图标的尺寸是16×16，高于文字本身的高度，为了在各浏览器下都保证这个对齐效果，我采用了这样一种思路。

按视觉稿百分百还原，做出来左图的效果，虽然css代码看起来有点儿麻烦。但是如果怎么简单怎么写，做出来的页面效果，却没有这样做的实际效果好。

事例三：页面构建细节上多处理一点点，用户体验提升一点点

还有这样一个模块：

页面构建工程师的分析过程：

通常遇到这样子的模块，我们会这么划分结构

由于用户头像只有30px正方的大小，所以算来用户名称只能显示2—3个汉字，其实很难让用户直观的区分出这个人究竟是谁。如果通过传统的思路来做，产品和设计估计都不会满意。那么，页面构建的过程中，我们就要想办法扩大用户名称的显示区域。

于是，我采用下面这个切图思路，在不改变HTML结构的情况下，只通过改变css，达到了扩大用户名称显示区域的目的。

给用户头像名称模块定宽，然后利用margin的负数值，让vs向左偏移。盖住部分头像1的区域。最终效果，可以显示4个汉字。