最近，在我的css編寫中，我遇到了一個問題：在插入圖片時，圖片下方會出現一條橫杠，讓我很困惑。

我調查了一下原因，發現是默認情況下，img標簽的display屬性的值是inline，即“內聯”元素，會產生一個基線（baseline）。

img {
display: inline;
}

由于圖片的高度并不是“內聯”元素的標準高度，因此會在底部產生一條橫杠。解決方法有兩種：

第一種是使用vertical-align屬性，將img元素的垂直對齊方式改為“底部對齊”，如下所示：

img {
vertical-align: bottom;
}

這樣，圖片就會對齊到最下方，沒有橫杠了。

第二種是將img標簽的display屬性設置為“塊”（block），以避免產生基線。如下所示：

img {
display: block;
}

這樣，圖片就改變了元素類型，不再產生基線和橫杠。

以上是我遇到的問題及解決方法，希望對大家有所幫助。