# 2019.10.31 HTML 筆記 ## inline、block、inline-block 比較表 ### O 表示支援，Ｘ 表示不支援 | | inline | block | inline-block | | --------------------------- |:-------------:|:-----:|:-------------:| | width | X | O | O | | height | X | O | O | | margin 水平軸 | O | O | O | | margin 垂直軸 | X | O | O | | padding 水平軸 | O | O | O | | padding 垂直軸 | X `註1` | O | O | | 預設排列方向 | 橫向 | 直向 | 橫向 | | 對空白字元的處理方式 | 保留 | 無效 | 保留 | | vertical-align 預設對齊方式 | 基線 baseline | X | 基線 baseline | | 套用父層的 text-align | O | X | O | > 註1： `inline-padding` 視覺上支援，但空間的佔據是<span style="color: red">**不支援**</span>的。 > 也就是說，視覺上有變化，但佔據的空間沒有變大 > ## 基線 baseline ![文字頂線至底線標記圖](https://i.imgur.com/3wQe8Rf.jpg) > 圖片來源：https://zhuanlan.zhihu.com/p/28626505 ### 圖片下方有空白、跟父層之間有距離，導致無法滿版 ==此狀況僅在 HTML5 才會出現== <!-- CodePen Start--> <iframe height="321" style="width: 100%;" scrolling="no" title="img_vertcial_align" src="https://codepen.io/dexuan90213/embed/BaaJYdm?height=321&theme-id=0&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/dexuan90213/pen/BaaJYdm'>img_vertcial_align</a> by 楊德軒 (<a href='https://codepen.io/dexuan90213'>@dexuan90213</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <!-- CodePen end--> > 1. `<img>` 為 `inline` 資料，預設垂直對齊為 `baseline` ，所以會有底線的空白區域，上方範例跟其他`inline` 的資料垂直對齊於 `baseline` ，可明顯看到圖片下邊對齊文字的基線。 > 2. ==只有一張圖片的情況下，也是會有底線的空白區域== ### 解決方式 設定圖片 `vertical-align` 屬性為 `top`、`middle`、`bottom`，其中一種即可，只要不是 `baseline` 都可以解決 <!-- CodePen Start--> <iframe height="265" style="width: 100%;" scrolling="no" title="img_vertcial_align_fixed" src="https://codepen.io/dexuan90213/embed/VwwyXxx?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/dexuan90213/pen/VwwyXxx'>img_vertcial_align_fixed</a> by 楊德軒 (<a href='https://codepen.io/dexuan90213'>@dexuan90213</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <!-- CodePen end--> ## inline、inline-block 對空白字元的處理方式 ### 對空白字元是保留，什麼意思呢？ 下方以 CodePen 製作兩個 `inline-block` 物件，A、B 兩個 `div` 設定為 `inline-block` <!-- CodePen Start--> <iframe height="227" style="width: 100%;" scrolling="no" title="inline對於空白字元的處理" src="https://codepen.io/dexuan90213/embed/gOOoyWY?height=227&theme-id=0&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/dexuan90213/pen/gOOoyWY'>inline對於空白字元的處理</a> by 楊德軒 (<a href='https://codepen.io/dexuan90213'>@dexuan90213</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <!-- CodePen End--> 疑？奇怪了，兩個之間明明沒有多空格！ 怎麼會有中間的空白區域。 A、Ｂ 之間的空白區域位於換行所產生的空格，如下圖紅框處： ![換行空白標示](https://i.imgur.com/RnUqCo0.png) ### 既然換行會產生空格，那不要換行不就可以解決的嗎！ Yes!，不要換行的確能解決 <!-- CodePen Start--> <iframe height="265" style="width: 100%;" scrolling="no" title="inline對於空白字元的處理＿不換行" src="https://codepen.io/dexuan90213/embed/QWWaPJv?height=265&theme-id=0&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/dexuan90213/pen/QWWaPJv'>inline對於空白字元的處理＿不換行</a> by 楊德軒 (<a href='https://codepen.io/dexuan90213'>@dexuan90213</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <!-- CodePen End--> 但是總不可能不換行的寫在同一行。 ### 那這樣該怎麼辦？ 換行會有空白，不換行不會有空白 在 `inline`、`inline-block` 下，HTML 元素標籤之間的空格、換行、Tab 空格、或連續多個空格（只會視為一個），將會佔用一個空格的空間。 #### 解法 空格在父層產生的，把父層的 `font-size` 設定成 0，這樣空格就消失囉！ <!-- CodePen Start--> <iframe height="265" style="width: 100%;" scrolling="no" title="inline對於空白字元的處理_font-size_0" src="https://codepen.io/dexuan90213/embed/jOOYRoG?height=265&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/dexuan90213/pen/jOOYRoG'>inline對於空白字元的處理_font-size_0</a> by 楊德軒 (<a href='https://codepen.io/dexuan90213'>@dexuan90213</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <!-- CodePen End--> **欸～等等！可是這樣我的文字消失了，怎麼辦！** > 因文字的設定會繼承，在父層套用文字設定，子層會繼承父層的設定，所以文字也一併變成 0 囉！ **再把子層的 `font-size` 加回來就好囉！** 以下範例， 在 A、B 兩個 class 設定 `font-size`，文字就回來了。 <!-- CodePen Start--> <iframe height="352" style="width: 100%;" scrolling="no" title="inline對於空白字元的處理_font-size_0" src="https://codepen.io/dexuan90213/embed/KKKZYOy?height=352&theme-id=0&default-tab=css,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/dexuan90213/pen/KKKZYOy'>inline對於空白字元的處理_font-size_0</a> by 楊德軒 (<a href='https://codepen.io/dexuan90213'>@dexuan90213</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <!-- CodePen End--> ###### tags: `HTML`, `CSS`, `inline`, `block`, `inline-block`, `比較表`, `圖片底下空白解決方式`, `inline 空白字元` `Done`