這是一篇專門針對 剛入門 前端的小白們，作為個前端開發人員，我們應該要具備的就是 99.9%的還原設計圖，那么必不可少的就是設置頁面中文字的上下間距問題，也是剛入門的人員比較難的一個點，怎樣才可以寫的跟設計圖的一模一樣呢。

比如這樣的一個圖片，里面有幾種字體大小和行間距都不一樣，算是一個比較復雜一點的：

以下我介紹兩種設置這個間距的方法：

1.只用line-height（行高）

使用行高來實現，首先我們要明白的是什么是行高？行高由什么來組成的

概念：字面意思，就是這一行所占據的高度

組成：字體大小 + 上行間距（這一行文字上邊的距離） + 下行間距（這一行文字下邊的距離）

特別注意：行高中的 上行間距? ?=? 下行間距

想要實現設計圖上的效果，那么行高的值應該設置為多少呢

這個行間距就是行與行之間的距離，但是這個距離的話是上一行文字的下行間距? + 下一行文字的上間距組成的，雖然沒有到我們的重點設置值，但是明白這個比設置值可能要重要的多，我們了解這個有什么作用，了解這個我們就知道我們應該怎么樣量行高了

比如我要量這行文字的行高：

我們知道 行高中的上行間距 與下行間始終相等，而且行與行之間的距離 是上一行文字的下行間距 + 下一行文字的上行間距組成的，并且這個三行文字明顯是一樣的效果，其實就得到一個 行與行之間的距離 =? 行高中的上行間距 + 下行間距，為了更加準確的量行高我們應該這樣 從文字的第一行文字的最頂端 量到 下一行文字的 頂端 就得到這行文字的行高了，話不多說，直接上圖：

好，下面的三行文字已經可以了，那么 這一行的行高有怎么量呢？

剛剛上面已經講過了 行間距的問題

那么這里的行間距包含了 精確高效...文字的上間距，所以想要量得更加準確的行高的，兩行文字的行間距 - 下一行文字的上行距 = 上一行文字的下間距，因為上行間距 = 下行間距，想要這行的行高就簡單了

這一行文字的line-height = （量行文字的行間 - 下面文字的上行間距）*2 + 這行文字的大小

注：個人覺得這種方式的比較蠻煩，但是能讓你很好的理解行高的 以及行間距的問題

?

2.使用line-height（行高） + margin（外邊距）

行高上面已經說過了，就不重復的說，那么我們說說margin，margin其實就是css盒子模型中的屬性，表示外邊距的意思，也就是元素與元素之間的距離

那么上面的我們所提到的行間距是不是可以理解為 元素與元素之間的距離呀

我們知道這個是元素與元素之間的距離，我們只需要給每一個元素設置 margin-top或者 margin-bottom就可以了，但是有一個問題，就是每一個元素都有一個默認行高，并且行高的大小不是固定的，我們沒有辦法精確的實現，那么想要更加精準的還原設計圖怎么，可以設置 元素的 line-height= 元素的font-size值，這樣的話，元素的上間距 和下間距 = 0，我們再去設置 margin-top或者 margin-bottom就不會有誤差了

這種方法的話就簡單很多了，我做項目中的我還是會比較常用這中方法的，希望能夠幫助到你們喲

總結

以上是生活随笔為你收集整理的如何精确的设置行与行之间的间距的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。