W_你這個間隙#

# 如何解決間隙 ![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>  //◦為空白，⇥為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>  //◦為空白，⇥為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>  ``` 開始處理 ```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之間的空白