在撰寫網頁的時候，大家都知道要透過<br/>來讓文字換行，，不然文字就會全部擠在同一行。不過可能也會發現，如果網頁設定的是<section>，那麼即使沒有換行符也會自動換行。其實這就是block和inline的差異，以下就來看看這兩種差在哪裡吧。
首先我們開啟一個HTML檔案試試看吧，這裡不從頭開始寫，而是先從http://example.com/複製網頁原始碼試試看。
複製這個原始碼到新的檔案，另存為html檔，用瀏覽器開啟就會看到一樣的網頁囉。
在這裡我們先添加幾個超連結進去看看。
這裡先不指定連結位置，先看看效果就好。這時候整理一下網頁，果然出現了三個超連結在底部。
首先在這裡就可以看出差異了，網頁中間的部分在HTML裡面是包在<div>裡面的，而超連結和<div>之間並沒有換行符，不過卻會自動換行；然而三個超連結之間並不會自動換行。
這是因為一個是區塊block，一個是inline。像是<div></div>這樣包裹一整段內容的CSS設定稱為block，這就像是拼圖一樣，透過設定block產生了一整個獨立的區域出來，而每一個區塊之間都會自動保持距離。
而超連結則是直接將CSS代碼輸入在HTML裡面，這種方式稱作inline，inline之間並不會自動換行。
不過如果將inline的東西放入block裡面，那麼就會產生一樣的效果。這裡就試試看用<li>將每一個超連結都包起來吧。
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>在看看效果，果然可以發現三個超連結自動換行了，這就是block的應用。
那麼有沒有將block轉換成inline的方式呢？有的，可以透過CSS選取器，讓block的內容強迫用inline的方式呈現。嘗試在head的部分加入display:inline;試試看。
li {
display: inline;
}果然，超連結又變成並排顯示的樣子了。
以上就是今天的內容，關於block和inline的應用和轉換方式就是這樣。
