阿嬷都看得懂的元素容器与隐藏空格解法

昨天我们做出了满版横幅的粉红贴纸，今天要开始切中央的橘色贴纸与黄色贴纸了！我们在之前曾经提到，最好把黄色贴纸群的标签，包含在橘色贴纸的标签里面；这是因为希望黄色贴纸群的位置，能够被橘色贴纸的位置所决定。像这种把整群元素，用父元素打包带走的状况下，我们就把这个父元素称作「容器」(英文会是 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 个黄色贴纸要满足下面几个条件：

1. 这 8 张贴纸要横向排列；
2. 这 8 张贴纸要 4 个 1 列；
3. 列中的 4 张贴纸彼此间，还有和橘色贴纸的左右两边，都是等距的；
4. 这 8 张贴纸要排成 2 列；
5. 这 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 把所有标签头尾连成一行後，这些空格就会自动消失。

所以，我们现在也是要把这些标签头尾相连吗？这样也太麻烦了吧！其实不用，既然我们已经知道它是空格，而空格本身其实也是个文字，而这个文字本身也有字型大小。聪明的阿嬷应该已经想到：那麽，不就只要把这个空格的字型大小归零就好？没错，所以我们要在外层的橘色贴纸中，加上

font-size:0;

就会解决这个隐藏空格的问题罗！

最後的绿色贴纸和昨天的粉红贴纸是类似的，就交给各位阿嬷自己完成罗！

完成的程序码可以参考底下：
https://codepen.io/LogosChen/pen/qBjmvoX

想一想：

1. 这些区块元素全部都是使用 div 来表示，看起来是不是很混乱呢？我们有没有更好的标签，可以帮助我们在语意上区分这些区块元素呢？
2. 只要每列的区块数量固定，其实我们可以按照规律算出每个等宽间隔的长度。这个规律是什麽呢？我们有没有其他的样式，可以让我们不用每次都重新计算呢？