block, inline, inline-block

display:block;

  1. 相當於 display:block flow; 的速寫。
  2. 在版面上擁有一塊矩形區域，以 block box 模式與其它元素連動。而對元素的內容以 flow 模式處理，文字及 inline box 子元素會在區域內流排 (flow) 。
  3. Normal Flow 而 block-level box 寬度為 auto 時， Box 寬度自動延伸為其容納區 (containing block) 寬度，而且也會形成元素內容的容納區。這也就解釋了大家視為理所當然的邏輯，段落寬度可以是變動的，而文字內容會自動隨之更動斷行。
  4. 典型的 html 元素如， <p>, <h1>~<h6>, <article>, <section>, <div>, <body> 等，初值就是 display:block 。

display:inline;

  1. 相當於 display:inline flow; 的速寫。
  2. 元素會在的其容納區內隨著流排 (flow) ，以 inline box 模式與其它元素或文字連動 (單純文字明顯地就是屬於 inline-level ，縱使它沒有實際元素名稱) 。而，對元素的內容 (如果有) 也以 inline 模式處理，如果是文字或 inline box 子元素， Box 則無法確定能形成一塊矩形區域 (因為必須隨著流排、更動斷行) 。此狀況下，元素指定寬高也是無效的，且指定上或下 margin, padding 不會變動一行的高度，這合乎邏輯的，如果行高度會隨之變動，整體文章編排不就跳上跳下了。
  3. 明顯地， Box 尺寸不是與容納區連動來決定了，所以不會像 block box 會延伸到容納區，而是視其內容來決定。也因此，不會形成內容元素的容納區。
  4. 典型的 html 元素如， <strong>, <em>, <a>, <input>, <img>, <iframe>, <video> 等，初值就是 display:inline 。

display:inline-block;

  1. 相當於 display:inline flow-root; 的速寫。
  2. 類似 display:inline ，元素的會在容納區內隨著流排，以 inline box 模式與其它元素連動。而，對元素的內容則為 block 模式，這就會在版面上擁有一塊矩形區域，像一個大方塊隨著文字流排。也因此，指定 margin, padding, border 會造成行高度的變動，當然，是矩形區域指定寬高也會有效，也就會形成內容元素的容納區。
  3. 典型的 html 元素如， <textarea> 等，內定就是 display:inline-block 。

css 體驗室

display:inline;

html 片段： h4, p 內定是 display:block ，並有上下 margin ，試試指定 display:inline 的變化。虛線內緣 (article) 為模擬容納區。
<article>
<h4>岳陽樓記 范仲淹</h4><p>慶曆四年春……</p><p>予觀夫巴陵勝狀……</p><p>若夫霪雨霏霏……</p><p>至若春和景明……</p><p>嗟夫！予嘗求古仁人之心……</p><p>時六年九月十五日。</p>
</article>

岳陽樓記 范仲淹

慶曆四年春，滕子京謫守巴陵郡。越明年，政通人和，百廢具興，乃重修岳陽樓，增其舊制，刻唐賢今人詩賦於其上；屬予作文以記之。

予觀夫巴陵勝狀，在洞庭一湖。銜遠山，吞長江，浩浩湯湯，橫無際涯；朝暉夕陰，氣象萬千；此則岳陽樓之大觀也，前人之述備矣。然則北通巫峽，南極瀟湘，遷客騷人，多會於此，覽物之情，得無異乎？

若夫霪雨霏霏，連月不開；陰風怒號，濁浪排空；日星隱耀，山岳潛形；商旅不行，檣傾楫摧；薄暮冥冥，虎嘯猿啼；登斯樓也，則有去國懷鄉，憂讒畏譏，滿目蕭然，感極而悲者矣！

至若春和景明，波瀾不驚，上下天光，一碧萬頃；沙鷗翔集，錦鱗游泳，岸芷汀蘭，郁郁青青。而或長煙一空，皓月千里，浮光躍金，靜影沉璧；漁歌互答，此樂何極。登斯樓也，則有心曠神怡，寵辱皆忘，把酒臨風，其喜洋洋者矣。

嗟夫！予嘗求古仁人之心，或異二者之為，何哉？不以物喜，不以己悲，居廟堂之高，則憂其民；處江湖之遠，則憂其君。是進亦憂，退亦憂；然則何時而樂耶？其必曰：「先天下之憂而憂，後天下之樂而樂」歟！噫！微斯人，吾誰與歸！

時六年九月十五日。

display:block;

html 片段： strong, b 內定是 display:inline ，試試指定 display:block 的變化。虛線內緣表示 article 。
<article>
 <ul>
  <li>泊秦淮 <strong>杜牧</strong></li>
  <li>出塞 <strong>王之渙</strong></li>
  <li>瑤瑟怨 <strong>溫庭筠</strong></li>
  <li>寒食 <strong>韓翃</strong></li>
 </ul>
 <p><b>春城無處不飛花，</b><b>寒食東風御柳斜；</b><b>日暮漢宮傳蠟燭，</b><b>輕煙散入五侯家。</b></p>
</article>
  • 泊秦淮 杜牧
  • 出塞 王之渙
  • 瑤瑟怨 溫庭筠
  • 寒食 韓翃

春城無處不飛花，寒食東風御柳斜；日暮漢宮傳蠟燭，輕煙散入五侯家。

display:inline-block;

html 片段： ul 內定是 display:block ， a 內定是 display:inline ，試試指定 display:inline-block 的變化。虛線內緣 (article) 為 ul 的模擬容納區。
<article>
 <ul><li>隱隱飛橋隔野煙</li><li>…<li>…<li>洞在清谿何處邊</li></ul><ul><li>葡萄美酒夜光杯</li><li>…<li>…<li>古來征戰幾人回</li></ul><ul><li>春城無處不飛花</li><li>…<li>…<li>輕煙散入五侯家</li></ul><ul><li>折戟沈沙鐵未銷</li><li>…<li>…<li>銅雀春深銷二喬</li></ul>
 <dl>
  <dt>雜說四 韓愈</dt>
  <dd>
   <p><a>世有伯樂，然後有千里馬……不以千里稱也。</a>……</p>
  </dd>
 </dl>
</article>
  • 隱隱飛橋隔野煙
  • 石磯西畔問漁船
  • 桃花盡日隨流水
  • 洞在清谿何處邊
  • 葡萄美酒夜光杯
  • 欲飲琵琶馬上催
  • 醉臥沙場君莫笑
  • 古來征戰幾人回
  • 春城無處不飛花
  • 寒食東風御柳斜
  • 日暮漢宮傳蠟燭
  • 輕煙散入五侯家
  • 折戟沈沙鐵未銷
  • 自將磨洗認前朝
  • 東風不與周郎便
  • 銅雀春深銷二喬
雜說四 韓愈

世有伯樂，然後有千里馬。千里馬常有，而伯樂不常有。故雖有名馬，只辱於奴隸人之手，駢死於槽櫪之間，不以千里稱也。馬之千里者，一食或盡粟一石。食馬者，不知其能千里而食也。是馬也，雖有千里之能，食不飽，力不足，才美不外見，且欲與常馬等不可得，安求其能千里也！策之不以其道，食之不能盡其材，鳴之而不能通其意，執策而臨之曰：“天下無馬。”嗚呼！其真無馬邪？其真不知馬也！