---
# System prepended metadata

title: 2019.10.31 HTML 筆記
tags: [HTML, inline 空白字元, inline, inline-block, 比較表, block, Done, 圖片底下空白解決方式, CSS]

---

# 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`