在使用CSS時，經常會遇到圖片（img）與CSS樣式之間出現空白的情況。

例如：

<img src="image.jpg" class="my-image">
.my-image {
width: 200px;
height: 100px;
}

這段代碼本意是將圖片的寬度設置為200px，高度設置為100px，但實際效果卻出現了空白。

這是因為img元素是一個內聯元素，且默認對齊方式為baseline（基線）。因此，圖片的下邊緣會對齊文本的基線，而不是圖片本身的下邊緣。

解決這個問題的方法有兩種：

第一種方法是將img元素的vertical-align屬性設置為middle或bottom。

<img src="image.jpg" class="my-image">
.my-image {
width: 200px;
height: 100px;
vertical-align: middle;
}

第二種方法是將img元素轉換為塊級元素（display: block），然后再設置寬度和高度。

<img src="image.jpg" class="my-image">
.my-image {
display: block;
width: 200px;
height: 100px;
}

以上兩種方法都能夠正確地將圖片的寬度和高度設置為指定的值，并消除與CSS樣式之間的空白。