## 多出來的空間
「貼心的瀏覽器」預設會幫圖片下方加一點距離，導致多出來的不明空白

## 怎麼解決
[HTML img 下方有不明空隙？！](https://tzuhui.io/2020/01/08/HTML/html-img-blank/)

### 解法一
解法一是可以將 vertical-align 的設定修改為 top/bottom/text-top/text-bottom **改變與父元素的對齊基準**。

img { 
  vertical-align: top/bottom/text-top/text-bottom;
}

#### 第一週影片 上半 V 01:03:00 - img(css default)

img {
  vertical-align: middle;
}

### 解法二：(常態)

img { 
  display: block;
}

:::spoiler ### CHAT Ans.
If you're experiencing a consistent 3-pixel space at the bottom of your HTML `img` element, it could be due to several reasons. Here are a few things you can check and consider to troubleshoot and fix the issue:

1. **Vertical Alignment:**
Ensure that the `vertical-align` property for the `img` element is set to `bottom` or `baseline`:

   img {
     vertical-align: bottom; /* or baseline */
   }

2. **Margin or Padding:**
Check if there is any margin or padding applied to the `img` element or its parent elements. You can try setting these values to zero:

   img {
     margin: 0;
     padding: 0;
   }

3. **Line-Height:**
If the image is inside a block element, check if the `line-height` property is affecting the spacing. You may want to set it to 0:

   .container {
     line-height: 0;
   }

4. **Font Size:**
If the image is inside a text container, the font size of the container might be affecting the vertical alignment. Set the font size to 0 for the container or adjust accordingly:

   .text-container {
     font-size: 0;
   }

5. **Display Property:**
Ensure that the `display` property is set to `block` or `inline-block` for the `img` element:

   img {
     display: block; /* or inline-block */
   }

6. **Border Property:**
Check if the `border` property is affecting the spacing. Set it to none or adjust as needed:

   img {
     border: none;
   }

7. **Box-Sizing Property:**
Ensure that the `box-sizing` property is set to `content-box` or `border-box`:

   img {
     box-sizing: content-box; /* or border-box */
   }

If the issue persists, it might be helpful to inspect the element using browser developer tools to identify any additional styles that could be affecting the spacing. Additionally, consider providing more details or a code snippet for a more accurate diagnosis.
:::