今天跟大家聊聊CSS中一个很牛逼的东西——控行高。啥意思？就是说每段话上边和下边的空隙，就叫行高；两个句子之间的间隙，那就叫行间距了。运用好行高的话，你的文章排版会变得很好看，大家也愿意多花点时间去看看~
行高设置的基本概念
告诉你个秘密，行高是通过CSS里面的line-height属性调出来的。要看着顺眼，咱们直接设置一个固定数值，比如说16像素。如果还想再精确点儿，那就用百分比或者EM这种比例单位~例如把line-height调成1.5em，这时行高就是字体大小的1.5倍了这样设置后，每个字儿都会跟周围字儿保持适当距离，排列得整整齐齐哒。
说到继承就是你给大个子元素设定了行高后，下面的小子们也就自然跟着变高，无论你的文本跳跃度多大、难易程度如何，每个段落都会保持相同的身高，看起来就整洁多了
p {
line-height: 1.5; /* 设置行高为1.5个文本字符的高度 */
}
使用rem单位的妙处
我们这两天聊了下rem单位。说白了，它就是利用HTML元素本身的字号算尺寸。不管你把浏览器调大调小，你做的东西都能跟着变，特别适合现在各种设备满天飞的时代！
calc()函数的灵活运用
body {
line-height: 1.5; /* 设置全局行高为1.5个文本字符的高度 */
}
div {
/* 继承父元素的行高 */
}
你听过calc()这个函数吗？没问题！只要使用公式，不论是做简单或复杂的数学运算都轻而易举。比如要设文字大小，你可以写成line-height:calc(20px+10%);，这么简单！这样下来，字号大小会自动加到原有的行高上，多好使！特别适合那些总是要调行高的小伙伴们。
行高设置的小技巧
p {
line-height: 1.5rem; /* 设置行高为1.5倍的字体大小 */
}
调行高这事，有啥妙招吗？告诉你别搞得太高或太矮，太高看起来松垮但又有点乱；太矮的话，字都挤在一起，看不清了。所以，设个字体大小的1.2-1.5倍差不多合适。
说实话，行高，看你什么时候用了。手机上看字的时候，就别设置那么高，浪费屏幕呀。如果是图文混合的文章，稍微拉高点儿会好点儿。
结合其他样式调整行高
p {
line-height: calc(2em + 10px); /* 设置行高为2倍字体大小加上10像素 */
}
别只盯着行高不放，忽略了些小细节也是大问题！行距、字距、对齐方式啥的，都能帮你把版面弄得漂亮些。比如，适当地调节下字距，就会让文字看起来舒服多啦；再试试换个对齐方式，文章页面就能变得干净利落。
总结
说白了，行高这事儿看上去容易，实际上可不那么轻松。弄好了，读起来会特别舒服，感觉跟看大片似的过瘾！下次动笔写东西时可别忘了想想行高，这样你的作品肯定能更引人注目~
来说说，你平时写作会不会留意每个字和其他字之间的空格？快来跟咱们聊聊。别忘了给我点赞和转发！
评论0