CSS 之我的圖片有縫！

礙眼啦！

問題點

通常我們會把圖片放在一個盒子裡，像這樣：

<div class="wrapper">
  <img src="https://process.fs.teachablecdn.com/ADNupMnWyR7kCWRvm76Laz/resize=width:705/https://www.filepicker.io/api/file/9n6ZlBe3SbmlkuX2f2su">
</div>

但這時候會發現下面多了一條「縫」：

這是因為 <img> 是「inline-level」的元素。 有個叫 vertical-align 的屬性是用專門用來設定 inline 元素的對齊方式。因為它的預設值是 baseline，所以才會多了那條縫，只要把它改成 middle 或 bottom 就可以解決了：

img {
  vertical-align: middle;
}

結果：

或其實也有另外一種作法，就是把 <img> 設成 inline 以外的元素也可以。