在上一篇文章css區塊層級元素的定義是什嗎？css區塊層級元素有哪些？中我們單獨介紹css的塊級（block）元素，所以在這裡就不多說了~下面我們就來直接講解一下css行內元素。
css行內元素（inline element）
css行內元素也叫內嵌元素，行內元素一般都是基於語義級(semantic)的基本元素，只能容納文本或其他內嵌元素，常見內嵌元素 “a”。比如 SPAN 元素，IFRAME元素和元素樣式的display : inline的都是行內元素。例如文字這類元素，各個字母 之間橫向排列，到最右端自動折行。
css行內元素的特點：
1、可以和其他元素處於一行，不用必須另起一行。
2、元素的高度、寬度及頂部和底部邊距不可設定。
3、元素的寬度就是它包含的文字、圖片的寬度，不可改變。
在介紹完css行內元素後，我們來看一看css行內元素有哪些？
css行內元素有哪些？
常見的css行內元素：
| a：錨點 abbr：縮寫 acronym：首字 b：粗體(不推薦) bdo： bidi override big ：大字型 br ： 換行 cite ：引用 code：電腦代碼(在引用源碼的時候需要) dfn：定義欄位 em ： 強調 font ：字型設定(不推薦) i ： 斜體 img ：圖片 input ：輸入框 |
kbd：定義鍵盤文本 label ： 表格標籤 q ： 短引用 s：中劃線(不推薦) samp ：定義範例電腦代碼 select ：項目選擇 small： 小字型文本 span：常用內聯容器，定義文本內區塊 strike ： 中劃線 strong： 粗體強調 sub：下標 sup ： 上標 textarea ：多行文本輸入框 tt：電傳文本 u： 底線 |
接著，我們來看一看css區塊層級元素和css行內元素的區別有哪些？
css區塊層級元素和css行內元素的區別
css區塊層級元素和行內元素的區別之一：
區塊層級元素：區塊層級元素會獨佔一行，預設情況下寬度自動填滿其父元素寬度。
行內元素：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
<html><head> <title>區別</title> <style type="text/css"> .div1{background-color: #090;} .span1{background-color: yellow;} </style></head><body><div class="div1">區塊層級元素1</div><div class="div1">區塊層級元素2</div><span class="span1">行級元素1</span><span class="span1">行級元素2</span></body> </html>
效果如下：
css區塊層級元素和行內元素的區別之二：
區塊層級元素：區塊層級元素可以設定寬高。
行內元素：行內元素不可以設定寬高。
執行個體：
<html><head> <meta charset="UTF-8"> <title>區別</title> <style type="text/css"> p{background-color: #098;height: 50px;width: 50%;} div{background-color: green;height: 50px;width: 40%;} span{background-color: yellow;height: 70px;} strong{background-color: pink;height: 70px;} </style></head><body> <p>區塊層級元素一</p> <div>區塊層級元素二</div> <span>行內元素一</span> <strong>行內元素二</strong></body></html>
效果如下：
注意：區塊層級元素即使設定寬度也還是獨佔一行。
css區塊層級元素和行內元素的區別之三：
區塊層級元素：區塊層級元素可以設定margin，padding。
行內元素：行內元素水平方向的margin和padding如margin-left、padding-right可以產生邊距效果。
執行個體：
<head> <meta charset="UTF-8"> <title>區別</title> <style type="text/css"> p{background-color: #098;height: 50px;width: 50%;padding: 20px;margin: 20px;} div{background-color: green;height: 50px;width: 40%;;padding: 20px;margin: 20px;} span{background-color: yellow;height: 70px;padding: 40px;margin: 20px;} strong{background-color: pink;height: 70px;padding: 40px;margin: 20px;} </style></head><body> <p>區塊層級元素一</p> <div>區塊層級元素二</div> <span>行內元素一</span> <strong>行內元素二</strong> </body>
效果如下：
注意：行內元素豎直方向的如padding-top和margin-bottom不會產生邊距效果。
css區塊層級元素和行內元素的區別之四：
區塊層級元素：區塊層級元素對應display:block。
行內元素：行內元素對應display:inline。
最後說一個屬性：display：inline-block；可以讓元素具有區塊層級元素和行內元素的特性：既可以設定長寬，可以讓padding和margin生效，又可以和其他行內元素並排。是一個很實用的屬性。
說明：可以通過修改元素的display屬性來切換行內元素和區塊層級元素。
文章到這裡也就結束了，若是想瞭解更多的css區塊層級元素和行內元素的區別，可以去php中文網css視頻教程欄目看看視頻。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
