各位观众老爷，大家好！今天咱们来聊聊一个CSS界的新秀，一个能让你的文字排版瞬间变得整整齐齐、强迫症看了都舒服的属性——line-height-step。 一、背景故事：网页排版的那些事儿 在网页设计中，排版一直是个让人头疼的问题。设计师们追求美观，开发者们追求可控。然而，默认的CSS排版机制，在某些情况下，总会让人觉得差那么点意思。比如说，文字和背景网格对不齐，行间距忽大忽小，强迫症看了想打人。 以前，为了实现网格对齐，我们可能需要用各种hack手段，比如： 固定行高： line-height: 20px; 简单粗暴，但灵活性差，字体大小一变，立马崩盘。 JavaScript计算： 用JS动态计算行高，虽然灵活，但性能开销大，而且容易出现抖动。 Sass/Less预处理器： 借助预处理器，定义一些变量，实现类似的效果，但还是不够优雅。 这些方法，要么不够灵活，要么不够高效，要么不够优雅。有没有一种更简单、更优雅、更高效的方法呢？ 二、主角登场：line-height-step line-height-step，顾名思义，就是行高的步长。它可以让你指定行高必须是某个值的倍数，从而实现网 …