這是一篇專門針對 剛入門 前端的小白們，作爲個前端開發人員，我們應該要具備的就是 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就不會有誤差了
這種方法的話就簡單很多了，我做項目中的我還是會比較常用這中方法的，希望能夠幫助到你們喲