CSS圖片上方留白是一個(gè)很常見的問(wèn)題。如果你添加了一張圖片到一個(gè)HTML頁(yè)面中，你可能會(huì)發(fā)現(xiàn)圖片上方留有一段空白。這篇文章將介紹如何用CSS解決圖片上方留白的問(wèn)題。

img {
display: block;
margin: 0 auto;
padding: 0;
}

代碼中的這個(gè)CSS樣式會(huì)將圖片設(shè)置成一個(gè)塊級(jí)元素（display:block），并且會(huì)將圖片的外邊距（margin）設(shè)置成0，并將內(nèi)邊距（padding）也設(shè)置成0。這樣的話，圖片上方的留白就會(huì)被去掉。

如果這段代碼不能解決你的問(wèn)題，你還可以嘗試一些其他的方法。比如，在圖片最外層包裹一個(gè)div，將div的高度設(shè)置成圖片的高度，然后將圖片絕對(duì)定位到div中間。這樣也可以解決圖片上方留白的問(wèn)題。

.container {
height: 300px;
position: relative;
 }
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
 }

上面的代碼中，我們將.container高度設(shè)置成圖片的高度，然后將圖片絕對(duì)定位到.container中間。我們使用translate屬性將圖片從中心偏移回來(lái)。這樣，我們就可以解決圖片上方留白的問(wèn)題。

如果你在使用CSS時(shí)遇到一些問(wèn)題，你可以嘗試一些不同的方法。有時(shí)候，解決問(wèn)題的方法并不是唯一的。