11-3元素分類--內聯元素 · 初識HTML+CSS

在html中,`<span>、<a>、<label>、 <strong> `和`<em>`就是典型的**內聯元素**（**行內元素**）（inline）元素。當然**塊狀元素**也可以通過代碼`display:inline`將元素設置為**內聯元素**。如下代碼就是將**塊狀元素div**轉換為**內聯元素**，從而使 div 元素具有**內聯元素**特點。 ~~~ div{ display:inline; } ...... <div>我要變成內聯元素</div> ~~~ **內聯元素特點：** 1、和其他元素都在一行上； 2、元素的高度、寬度及頂部和底部邊距**不可**設置； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。小伙伴們你們觀查一下右側代碼段，有沒有發現一個問題，內聯元素之間有一個間距問題，這個問題在本小節的 wiki 中有介紹，感興趣的小伙伴可以去查看。 ### 任務 **我來試一試：感受一下內聯元素的特點** 在右側代碼編輯器中輸入各種內聯元素標簽，試一試他們的特點。 **這一小節沒有正確性驗證，單擊“提交”按鈕進入下一小節學習。** ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>行內元素標簽</title> <style type="text/css"> a,span,em{ background:pink;/*設置a、span、em標簽背景顏色都為粉色*/ } </style> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.imooc.com">慕課網</a> <span>33333</span> <span>44444</span><em>555555</em> </body> </html> ```