[Day 22] 阿嬤都看得懂的元素容器與隱藏空格解法

13th鐵人賽

Logos50607

團隊Web 實驗室

2021-10-07 10:00:52

785 瀏覽

阿嬤都看得懂的元素容器與隱藏空格解法

昨天我們做出了滿版橫幅的粉紅貼紙，今天要開始切中央的橘色貼紙與黃色貼紙了！我們在之前曾經提到，最好把黃色貼紙群的標籤，包含在橘色貼紙的標籤裡面；這是因為希望黃色貼紙群的位置，能夠被橘色貼紙的位置所決定。像這種把整群元素，用父元素打包帶走的狀況下，我們就把這個父元素稱作「容器」(英文會是 container 或 wrapper)。

橘色貼紙大概佔整個版面寬度的 80%，所以寬度就是 80vw。高度呢？上方粉紅貼紙的高度是 20vh，底下綠色貼紙和粉紅貼紙差不多大，所以也是 20vh。那麼，中間的橘色貼紙高度就是 100vh - 20vh - 20vh = 60vh。那麼，橘色貼紙要怎麼擺在正中間呢？
既然橘色貼紙的寬度是 80vw，我們把剩下的白邊寬度算出來，再除以 2，就會可以用外距，把橘色貼紙推到中間。因此，橘色貼紙的左側外距，會是 (100vw - 20vw) / 2 = 10 vw。因此，我們會寫下這樣的樣式：

.orange{
  height: 60vh;
  width: 80vw;
  background-color: orange;
  margin-left: 10vw;
}

等等，每次置中都要這樣算，也太累了吧！而且置中這件事情，很明顯是有規律的啊！只要我們把父元素的寬度，減去子元素的寬度，再除以 2 ，就會是子元素的 margin 不是嗎？這個應該電腦自己就可以算了吧！

沒錯，所以 CSS 很貼心地提供 auto 這個值，只要我們把左右兩邊的外距都設成 auto，就會自動把元素水平置中囉！該怎麼快速設定左右兩邊的外距呢？記得我們說過 margin 只設定 2 個值時，前者是垂直，後者是水平嗎？因此，只要寫下

margin: 0 auto;

就可以把元素水平置中囉！

接下來，我們就來處理裡面的 8 個黃色貼紙吧！這 8 個黃色貼紙要滿足下面幾個條件：

這 8 張貼紙要橫向排列；
這 8 張貼紙要 4 個 1 列；
列中的 4 張貼紙彼此間，還有和橘色貼紙的左右兩邊，都是等距的；
這 8 張貼紙要排成 2 列；
這 2 列彼此間，還有橘色貼紙的上下兩邊，都是等距的。

條件 1 比較簡單，還記得我們讓區塊元素水平排列的方式嗎？沒錯，就是使用

display 這個屬性，並且把值改為 inline-block。

想滿足條件 2 到條件 5，就必須做出些精密的計算了。

首先，我們來算算在一列中，我們有多少間距。由於一列中有 4 張黃色貼紙，黃色貼紙和橘色外框又有間距，所以會有 5 個間距。由於橘色貼紙的寬度是 80vw，所以這 5 個間距 + 4 張貼紙的寬度，就要等於 80vw。我們可以用幾個間距試試看，例如間距 2vw，這樣貼紙寬度就會是 (80vw - 2vw X 5) / 4 = 17.5vw，或者是間距 4vw，這樣貼紙寬度就會是 (80vw - 4vw X 5) / 4 = 15vw。這邊並沒有硬性的規定，端看有沒有特別的要求。我在這裡會採用間距 4vw、貼紙寬度 15vw 的方式來處理。

同理，由於橘色貼紙的高度是 60vh，2 列黃色貼紙就會有 3 個間距。按照上面的方式計算，我選擇間距 4vh，貼紙高度 24vh，加起來正好 60vh。寬、高、間距都準備好以後，我們就要開始寫樣式囉！

其中，最需要思考的，應該就是間距應該怎麼寫。你可能會說，咦，不就按照橘色貼紙的寫法，寫 margin: 4vh 4vw 就好了嗎？不太對喔！如果這樣寫，就會上下左右都有 margin 了，所以貼紙之間的距離會變成 8vh 和 8vw 喔！

因此，我們其實會需要統一用某個方向來推出外距，例如水平的外距都推左邊，垂直的外距都推上面。還記得 margin 寫 4 個值的時候，分別表示哪個方向嗎？沒錯，就是上、右、下、左。因此，我們 margin 的值應該會是 4vh 0 0 4vw，而整個黃色貼紙的樣式應該會是：

.yellow{
  display: inline-block;
  height: 24vh;
  width: 15vw;
  background-color: yellow;
  margin: 4vh 0 0 4vw;
}

等等，可是看起來好像有點不太對勁？好像中間的間距比較寬，可是最右側的間距又比左側更窄？

沒錯，這樣的樣式設定，沒辦法讓我們獲得理想的結果。那麼，原因出在哪呢？莫非是我們的外距算錯了？在我們打開發展者工具檢查以後，發現好像也不是這樣。仔細計算一下，會發現所有外距都是如同我們的設定。那麼，究竟是哪邊出問題了呢？

還記得我們在 Day 9 使用 span 標籤的時候，把 span 標籤拆成許多行的時候，中間出現的隱藏空格嗎？沒錯，瀏覽器會把我們在 .html 當中，在標籤以外的換行，都自動補個空格來處理。這也是為什麼當 Day 9 把所有標籤頭尾連成一行後，這些空格就會自動消失。

所以，我們現在也是要把這些標籤頭尾相連嗎？這樣也太麻煩了吧！其實不用，既然我們已經知道它是空格，而空格本身其實也是個文字，而這個文字本身也有字型大小。聰明的阿嬤應該已經想到：那麼，不就只要把這個空格的字型大小歸零就好？沒錯，所以我們要在外層的橘色貼紙中，加上