元素分類--內聯元素

元素分類--內嵌元素

在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.php.cn">php中文网</a>
<span>33333</span>
<span>44444</span><em>555555</em>
</body>
</html>


#
繼續學習
||
<!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.php.cn">php中文网</a> <span>33333</span> <span>44444</span><em>555555</em> </body> </html>