html中內聯元素和塊級元素的區別（超級詳細）
1.下表列出了內聯元素和塊級元素的主要區別
| 塊級元素 | 行內元素 |
| 獨佔一行,預設情況下，其寬度自動填滿其父元素寬度 | 相鄰的行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度隨元素的內容而變化 |
| 可以設定width，height屬性 | 行內元素設定width，height屬性無效 |
| 可以設定margin和padding屬性 | 行內元素起邊距作用的只有margin-left、margin-right、padding-left、padding-right，其它屬性不會起邊距效果。 |
| 對應於display:block | 對應於display:inline； |
2.按字母順序排列塊級元素主要有
<address> 定義地址
<caption> 定義表格標題
<dd> 定義列表中定義條目
<div> 定義文件中的分割槽或節
<dl> 定義列表
<dt> 定義列表中的專案
<fieldset> 定義一個框架集
<form> 建立表單元素
<h1><h2><h3><h4><h5><h6> 標題元素
<hr> 水平線
<legend> 給fieldset元素定義標題
<li> 定義列表專案
<noframes> 為那些不支援框架的瀏覽器顯示文字，放置於frameset標籤內
<noscript> 為那些不支援指令碼的瀏覽器顯示文字
<ol> 有序列表
<ul> 無序列表
<p> 定義段落
<pre> 定義預格式化文字
<table> 定義表格
<tbody> 定義表格主體
<td> 表格中的標準單元格
<tr> 表格中的行
<tfoot> 表格中的頁尾
<th> 定義表頭單元格
<thead> 定義表格的表頭
3.內聯元素有
<a> 可定義錨以及超連結
<abbr> 表示一個縮寫形式
<acronym> 表示只取title中首字母的縮寫形式
<b> 字型加粗
<bdo> 可覆蓋預設的文字方向
<big> 大號字型加粗
<br> 換行
<cite> 引用進行定義
<code> 定義計算機程式碼文字
<dfn> 定義一個定義專案
<em> 定義為強調的內容
<i> 斜體文字效果
<img> 向網頁中嵌入一張影象
<input> 輸入框
<kbd> 定義鍵盤文字
<label> 為input進行標記/標註
<q> 定義短的引用
<s> 表示不準確不相關，卻不應當給予刪除的內容
<samp> 定義樣本文字
<select> 定義單選或者多選選單
<small> 呈現小號字型效果
<span> 組合文件中的行內元素
<strong> 語氣更強的強調內容
<sub> 定義下標文字
<sup> 定義上標文字
<textarea> 多行文字輸入控制元件
<tt> 打字機或者等寬的文字效果
<var> 定義變數
<input>和<img>都是行內元素，但是它們是可以設定寬和高的。這裡就涉及到可替換元素和不可替換元素。
替換元素就是瀏覽器根據元素的標籤和屬性，來決定元素的具體顯示內容。
例如瀏覽器會根據<img>標籤的src屬性的值來讀取圖片資訊並顯示出來，而如果檢視html程式碼，則看不到圖片的實際內容；又例如根據<input>標籤的type屬性來決定是顯示輸入框，還是單選按鈕等。 html中的<img>、<input>、<textarea>、<select>、<object>都是替換元素。這些元素往往沒有實際的內容，即是一個空元素，例如： <img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" /> 瀏覽器會根據元素的標籤型別和屬性來顯示這些元素。可替換元素也在其顯示中生成了框。
不可替換元素 html 的大多數元素是不可替換元素，即其內容直接表現給使用者端（例如瀏覽器）。
例如： <p>段落的內容</p> 段落<p>是一個不可替換元素，文字“段落的內容”全被顯示。
Demo
<html>
<head>
<style>
#div1{
background-color: red;
border: 1px solid black;
display: inline;
margin: 100px;//內聯元素只有左右外邊距有效
width: 100px;//內聯元素寬高是有內容決定的
height: 100px;//內聯元素寬高是有內容決定的，line-height也可以設定高度
}
#div2{
width: 100px;
height: 100px;
background-color: green;
margin: 100px;
}
</style>
</head>
<body>
<div id="div1">12345</div>
<div id="div2">122</div>
</body>
</html>