在HTML中有許多能夠元素能夠顯示文本，但這些元素之間也有一些小區別，這些區別在排版設計的時候會非常有用，而其中今天要來講的就是區塊級容器和行內容器的區別。

區塊級容器(block)和行內容器(inline)的主要區別:

1. 顯示方式不同

• 區塊級容器通常會獨佔一行,前後會有換行。比如<div>、<p>等元素。
• 行內容器不會獨佔一行,會在文本流中排列。比如<span>、<a>等元素。

2. 默認寬高不同

• 區塊級容器的預設寬度是其父容器的100%。預設高度由內容決定。
• 行內容器的預設寬高由其內容決定。

3. 設置寬高的方式不同

• 區塊級容器可以通過width/height屬性設置寬高。
• 行內容器不能直接設置寬高,需要通過line-height設置高度。

4. 默認邊距不同

• 區塊級容器可以直接設置上下邊距。行內容器只能設置左右邊距。

5. 嵌套關係不同

• 區塊級容器可以包含行內容器。行內容器不能包含區塊級容器。

總之，區塊級容器用於內容分組，行內容器用於文本內容中的小部分樣式設置。兩者對文檔流的影響不同。

屬於區塊級容器的 HTML 標籤有：

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<table>、<form>、<header>、<footer>、<section> 等。

屬於行內容器的 HTML 標籤有：

<span>、<a>、<br>、<i>、<em>、<strong>、<label>、<input>、<select>、<textarea>、<button>、<img> 等。

區塊級內容標籤|
----|----
<div>|文檔的區塊級容器,用於組合其他HTML元素
<p>|段落標籤
<h1>-<h6>|標題標籤
<ol> <ul> <li>|有序/無序列表
<table>|表格標籤
<form>|表單標籤

行內容器標籤|
----|----
<span>|通用行內容器,用於文本內分組
<a>|鏈結標籤
<br>|換行標籤
<img>|圖像標籤
<input> <button>|表單控件標籤
<label>|表單控件標題標籤
<strong> <em>|強調標籤

將兩者的區別分清楚想必之後在做排版設計時也能多少派上用場吧。

更多的區塊級容器和行內容器可以參照官方MDN文檔。