在開發網站時，我們經常需要使用圖像和文本來傳達信息。然而，在實踐中，我們會發現用CSS創建一個包含圖像和文本的元素時，圖像總是比文本高。

.example {
display: inline-block;
background-image: url('example.jpg');
background-repeat: no-repeat;
font-size: 16px;
}

在上面的代碼中，我們創建了一個包含背景圖片和文字的元素。然而，如果您在瀏覽器中實際查看此代碼，您會注意到圖像比文本高。這是因為在CSS中，背景圖像是應用于元素的內容框的，而不是元素本身的。因此，即使您將元素的高度設置為與文本相等，圖像仍然會比文本高。

幸運的是，有幾種方法可以解決此問題。

第一種方法是將圖像設置為background-size: contain。這將告訴瀏覽器將圖像縮放到元素的大小，從而使其與文本對齊。

.example {
display: inline-block;
background-image: url('example.jpg');
background-repeat: no-repeat;
background-size: contain;
font-size: 16px;
}

第二種方法是將文本設置為line-height: X，其中X是與元素高度相同的值。這將使文本垂直居中，從而與圖像對齊。

.example {
display: inline-block;
background-image: url('example.jpg');
background-repeat: no-repeat;
font-size: 16px;
line-height: 1.2;
height: 60px;
}

這些方法中的任何一種都可以解決圖像比文本高的問題。通過使用這些技巧，您可以創建具有圖像和文本的元素，并確保它們在視覺上對齊。