題一： 一般在我們的認識里行內元素是不支持寬高的，如果要讓其支持寬高，必須通過css顯示的轉換：display:block;可是所有的行內元素都不支持寬高嗎？其實不然，來看下面的例子：

demo1

demo2

代碼運行后我們發現input和img標簽居然支持寬高，在我們的印象中input和img是行內元素（inline），是不支持寬高的，但是它們卻有點特殊，原來它們是可替換元素！

html中的元素可分為替換元素和不可替換元素，替換元素本身是空元素，是由其屬性來決定的，比如這里的input，通過type屬性就可將其設置為文本框或單選按鈕，img也一樣，通過src元素可以來顯示不同的圖片，常見的有<img>、<input>、<textarea>、<select>，他們和一般的行內元素有區別，行內元素不支持寬高，而它們卻支持width和height屬性，如果沒設置寬高，就顯示默認的大小，比如img，就顯示圖片原來的尺寸。

不可替換元素比較常見，也就是塊級元素(div,p,h1……)或一些行內元素(span,strong,a……)，它們是直接顯示元素內容，比如你什么時候見過div通過type來顯示不同的東西？顯然沒有。

問題二：行內元素除了可替換元素外，比如span元素，一定要display:block;才可以支持寬高嗎？其實也不然。且看下面例子：

或者這樣設置也可以：

顯然我并沒有顯示的設置span元素為block，但是同樣能支持寬高，這里的原因是我css設置了span為position:absolute;或者float:left;讓其具有包裹性，從而支持寬高，所以在你設置元素浮動或者絕對定位的情況下，設置元素display:block;就顯得多余了。

Ps:如果喜歡，那就關注我吧！

技術等級】初級

【承接文章】《CSS段落對齊方式，系統認識塊級元素與內聯元素，CSS前端進階篇》

本文重點講解CSS技術中文本樣式的 line-height 屬性以及該屬性在單行垂直居中問題上的應用。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

一、設置段落行距：

CSS技術利用 line-height 屬性來設置行距

顧名思義，行距就是段落中行與行之間的距離。調整行距可以讓段落看起來更加美觀。

該屬性的取值是帶有單位的數值。

例如：p{line-height:30px;}

上述代碼表明：<p></p>標記對內部文本的行距為30像素。

本身該屬性的使用是非常簡單的，但是有一個問題需要大家考慮：這個行距是以一行的哪個標準線來進行度量的呢？答案是一行的“基線”。那么，什么是“基線”呢？

四線三格的第三線就是 “基線”

上面這張圖為我們解釋了什么是“基線”。基線就是英語本子上四線三格的第三線，是大部分英文字母在書寫時結束的那條線。

在CSS中，line-height 屬性的調整就是以這條線為標準線的。換句話說，當line-height屬性設置為一定的數值時，段落中任意兩行的行距就是這兩行基線之間的距離。

二、行距屬性的應用：

首先，大家看下面這個效果。頂部文本“歡迎關注小海前端”這幾個字在一個粉紅色的塊中顯示，并且是垂直方向居中的，這個應該在頁面中如何設置呢？

如何實現塊中的垂直居中

這就需要用到 line-height 屬性的一個小技巧。

當一行文本（注意：必須是一行）在一個<div></div>塊內部顯示時，將該<div></div>塊的行高設置為這個塊本身的高度，就可以讓內部的一行文本垂直居中了。

相應的CSS代碼如下所示：

div{

width:1000px; height:30px;

background-color:#ff5857; //該屬性為背景顏色，主要是讓我們能夠看到塊本身

line-height:30px;

}

大家看上述代碼：line-height 屬性的取值和 height 屬性的取值是相同的，這樣內部的一行文本就實現垂直居中了。

文章預告

下一篇文章中，小海老師會重點為大家講解vertical-align屬性的使用。該屬性的使用要求較多，使用起來較為繁瑣，希望廣大前端愛好者千萬不要錯過。

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我。我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上也已經寫了有十篇文章了。這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我精心整理和系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。