聊聊HTML裡面的「標籤的行高」和「標籤之間的間距」問題

第一次寫文章，不是很會取標題，寫的不好請見諒，謝謝 🙏 ～

今天來聊聊 HTML 裡面的標籤的 line-height 問題。

line-height 用於設置多行元素的空間量，如多行文本的間距。對於塊級元素，它指定元素行盒（line boxes）的最小高度。對於非替代的 inline 元素，它用於計算行盒（line box）的高度。

以 <p></p> 為例，你們在裡面寫入好幾段文字，之後輸入來用瀏覽器看的時候有發現每行文字之間都存在一定的距離嗎？這就是 line-height 所造成的。

那標籤之間的間距又是怎麼回事呢？前端的童鞋們肯定知道 margin 和 padding 是用來做什麼的，在這也作簡單的解釋吧！

margin 是用來設置某個標籤元素的外邊距的，而 padding 則是設定它的內邊距的。如果設置了這兩個或其中一個，就會造成標籤之間的間距了。當然，如果你沒有設置 margin 和 padding ，但有設定 line-height 的話，那也會造成標籤之間的間距的。

實際上，在瀏覽器看到之間存在的空白是由 (行高-字的像素)/2+間距 而來的。

所以在調整網頁上的間距時，除了 margin 和 padding ，還需要注意 line-height 所帶來的影響。