---
# System prepended metadata

title: W_你這個間隙#
tags: [CSS]

---

# 如何解決間隙

![image](https://hackmd.io/_uploads/r1Ysuqq6a.png)
如上圖，這是在T1切版會遇到的問題，在圖片與文字之間產生了一個不明空間。

目前已知問題點

- 元素被當成行內元素排版的時候，元素之間的空白符（空格、回車換行等）都會被瀏覽器處理，根據處理方式（默認是white-space:normal，合併多餘空白），原來HTML代碼中的Enter換行會被轉成一個空白符，所以元素之間就出現了空隙。


## 解法:

- 解法1：將容器的font-size屬性設定為0
  >因為空白的大小取決於容器的font-size屬性，因此可以將容器的font-size屬性設定為0（讓空白大小變成0）來解決，但這個方案會繼承到裡面的`<a>`(白話就是影響到內容字體)，所以要在內容的`<a>`再設定一次字體大小。

- 解法2：直接改flex元素(T3才能用Flex)
  >因為空白的起因是inline-block本身具有的特性，如果元素不是inline-block，那不就沒問題了嗎？使用display: flex;，讓兩個`<a>`變成flex-item，這樣就不會有inline-block的問題了
    
- 解法3：在img加上float
  >經實驗發現，在img使用float之後，上下之間的空隙就會消除

- 解法4：讓前後tag連接再一起(這僅限於內容左右並排的時候，如上圖的logo就無效)
  >如下面的程式碼><連接，但是缺點顯而易見，就是閱讀性不佳
  >`<span>結尾處的大於符號連接</span><span>開頭處的小於符號連接</span>`
- 解法5：給img做display:block;
  >經實驗發現：inline元素與block元素彼此之間無法連結再一起(img是inline，p是block)，這時改變img的`display:block;`，上下之間空白就會消失了

## 到底花生蛇ㄇ術
根據 > https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
以及 > https://www.w3.org/TR/css-text-3/#collapse

得知whitespace處理順序如下：
#### inline formatting context（元素中含有inline元素時）
```htmlmixed
//範例程式碼
<h1>   Hello
        <span> World!</span>   </h1>

<!--
<h1>◦◦◦Hello◦⏎
⇥⇥⇥⇥<span>◦World!</span>⇥◦◦</h1>
-->

//◦為空白，⇥為tab，⏎為換行
```
1. 所有在換行前後的空白和tab被忽略
```htmlmixed
<h1>◦◦◦Hello⏎
<span>◦World!</span>⇥◦◦</h1>
```
2. 將所有tab視為空白
```htmlmixed
<h1>◦◦◦Hello⏎
<span>◦World!</span>◦◦◦</h1>
```
3. 將換行視為空白
```htmlmixed
<h1>◦◦◦Hello◦<span>◦World!</span>◦◦◦</h1>
```
4. 連續兩個以上的空白視為一個空白並留下第一個空白，即使空白中間有橫跨inline元素
```htmlmixed
<h1>◦Hello◦<span>World!</span>◦</h1>
```
5. 任何在元素起始和結束的空白被忽略
```htmlmixed
//<h1>後方及</h1>前方
<h1>Hello◦<span>World!</span></h1>

//**注意最後留下來的空白是Hello後方的換行**
```
#### block formatiing context（元素中含有block元素時）
```htmlmixed
//範例程式碼
<body>
  <div>  Hello  </div>

   <div>  World!   </div>
</body>

<!--
<body>⏎
⇥<div>◦◦Hello◦◦</div>⏎
⏎
◦◦◦<div>◦◦World!◦◦</div>◦◦⏎
</body>
-->
//◦為空白，⇥為tab，⏎為換行
```
1. 任何空白、tab、換行都會被block包起來
```htmlmixed
<block>⏎⇥</block>
<block>◦◦Hello◦◦</block>
<block>⏎◦◦◦</block>
<block>◦◦World!◦◦</block>
<block>◦◦⏎</block>
```
2. 依照和inline formatting context一樣的流程處理
```htmlmixed
<block></block>
<block>Hello</block>
<block></block>
<block>World!</block>
<block></block>
```
3. 由於有三個block沒有任何內容，所以最終不會呈現在畫面中

#### 在inline和inline-block元素之間的空白
可以從[這裡](#inline-formatting-context%EF%BC%88%E5%85%83%E7%B4%A0%E4%B8%AD%E5%90%AB%E6%9C%89inline%E5%85%83%E7%B4%A0%E6%99%82%EF%BC%89)發現最後Hello和World之間的空白其實是換行造成的，因此inline和inline-block元素之間的換行會造成畫面呈現出空白

```htmlmixed
//範例程式碼
<ul class="people-list">
  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>
</ul>

<!--
<ul class="people-list">⏎
◦◦<li></li>⏎
⏎
◦◦<li></li>⏎
⏎
◦◦<li></li>⏎
⏎
◦◦<li></li>⏎
⏎
◦◦<li></li>⏎
</ul>
-->
```
開始處理
```htmlmixed
//所有在換行前後的空白和tab被忽略

<ul class="people-list">⏎
<li></li>⏎
⏎
<li></li>⏎
⏎
<li></li>⏎
⏎
<li></li>⏎
⏎
<li></li>⏎
</ul>

//將所有tab視為空白

<ul class="people-list">⏎
<li></li>⏎
⏎
<li></li>⏎
⏎
<li></li>⏎
⏎
<li></li>⏎
⏎
<li></li>⏎
</ul>
    
//將換行視為空白
    
<ul class="people-list">◦<li></li>◦◦<li></li>◦◦<li></li>◦◦<li></li>◦◦<li></li>◦</ul>
    
//連續兩個以上的空白視為一個空白並留下第一個空白，即使空白中間有橫跨inline元素

<ul class="people-list">◦<li></li>◦<li></li>◦<li></li>◦<li></li>◦<li></li>◦</ul>
    
//任何在元素起始和結束的空白被忽略
    
<ul class="people-list"><li></li>◦<li></li>◦<li></li>◦<li></li>◦<li></li></ul>

//發現li之間果然有空白！！
```



## 郭嘉消空格實驗
原始碼
```
<div class="logo text-center">
    <a href="./index.html">
        <img src="./img/logo.png" alt="logo" target="_self">
    </a>
    <h1>ZERO TYPE</h1>
</div>
```
簡化一下
```
<div>⏎
⇥<a>⏎
⇥⇥<img>⏎
⇥</a>⏎
⇥⇥<h1></h1>⏎
</div>
```
1. 裡面有h1先處理
```
<div>⏎
⇥<a>⏎
⇥⇥<img>⏎
⇥</a>⏎
<block>⇥⇥</block><h1></h1><block>⏎</block>
</div>
```
2. 所有在換行前後的空白和tab被忽略
```
<div>⏎
<a>⏎
<img>⏎
</a>⏎
<block>⇥⇥</block><h1></h1><block>⏎</block>
</div>
```
3. 將所有tab視為空白
```
<div>⏎
<a>⏎
<img>⏎
</a>⏎
<block>◦◦</block><h1></h1><block>⏎</block>
</div>
```

3. 將換行視為空白
```
<div>◦
<a>◦
<img>◦
</a>◦
<block>◦◦</block><h1></h1><block>◦</block>
</div>
```

4. 連續兩個以上的空白視為一個空白並留下第一個空白，即使空白中間有橫跨inline元素
```
<div>◦
<a>◦
<img>◦
</a>◦
<block>◦</block><h1></h1><block>◦</block>
</div>
```

5. 任何在元素起始和結束的空白被忽略
```
<div>
<a>
<img>
</a>◦
<block></block><h1></h1><block></block>
</div>
```
6. 登愣
```
<div>
<a>
<img>
</a>◦
<h1></h1>
</div>
```
> 看起來是剩下img(外面包a)和h1之間的空白