1. HTML 塊級元素（block element）

塊級元素總是在新的行上開始，並盡可能地占據本行全部可用的寬度。

下面是咱學過的和沒學過的塊級元素的集合：
<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>~<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <output> <p> <pre> <section> <table> <tfoot> <ul> <video>

1. HTML 行內元素（inline element）

相反，行內元素不會另起一行，它也只占用必要的寬度。

一言以蔽之：塊級元素講究排場，行內元素勤儉節約！（當然，也不是說誰好誰壞，元素無貴賤，存在即合理）

下面是咱學過的和沒學過的行內元素的集合：
<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>

2. 行內元素與塊級元素對比

一般情況下，行內元素只能包含數據和其他行內元素。

而塊級元素可以包含行內元素和其他塊級元素。

這種結構上的包含繼承區別可以使塊級元素創建比行內元素更”大型“的結構。


3. 為什麽要將內容分為塊級和行內？

多敲幾行代碼的朋友可能就會發現，無論你在 p 元素中敲了多少個空格和換行，在瀏覽器上都只顯示一個：

 1 ……
 2     <p>黑夜給了我黑色的          
 3 
 4 
 5 
 6 
 7 
 8         <span>眼睛</span>，</p>
 9     <p>我卻用它尋找     <
 
span>光明</span>。</p>
10 ……

這是因為 HTML 要求瀏覽器將連續的空白字符合並為一個空格，這種做法其實很有道理，因為這樣可以把 HTML 文檔的布局和文檔內容自身的布局給區別開來。

相當於你文檔中使用空格換行來達到所謂的美觀需求的布局，HTML 是不予理會的，如果你想要內容在網頁上以美美噠的形式展現出來，那好，請使用 HTML 的語法來實現。

block element and inline element