在 CSS 中，對(duì)于圖片的布局需要我們特別留意。經(jīng)常我們可以看到圖片在使用時(shí)會(huì)出現(xiàn)一些默認(rèn)的空白，這會(huì)影響到頁面的美觀和布局。那么這些空白是怎樣產(chǎn)生的呢？ 首先，CSS 中的圖片默認(rèn)是行內(nèi)元素（inline），和文字類似，占用的空間大小即為圖片實(shí)際尺寸。如果圖片的高度比行高小，那么圖片會(huì)在垂直方向自動(dòng)居中對(duì)齊。 但是，在圖片標(biāo)簽的開始標(biāo)簽與結(jié)束標(biāo)簽中，會(huì)有一些空格、回車或者 Tab 鍵等字符產(chǎn)生，這就會(huì)導(dǎo)致圖片后面出現(xiàn)一定的空白。此時(shí)我們可以使用 font-size: 0; 或者 word-spacing: -1em; 這樣的設(shè)置來消除這些空白。 如果圖片使用背景圖（background-image）的方式來展示，那么同樣也可能會(huì)存在空白問題。這是因?yàn)?background-image 本身屬于行內(nèi)元素，同樣存在行高的問題。此時(shí)可以使用 background-size: cover; 或者 background-position: center center; 這樣的設(shè)置來解決。 另外，還可以使用 vertical-align: middle; 來調(diào)整圖片和文本的垂直對(duì)齊方式。 下面是一些常用的 CSS 代碼解決圖片默認(rèn)空白的問題： ``` img { display: block; /* 將圖片轉(zhuǎn)換為塊級(jí)元素，避免受行高影響 */ font-size: 0; /* 設(shè)置字體大小為 0，消除默認(rèn)空白 */ max-width: 100%; /* 圖片寬度最大為父元素寬度 */ height: auto; /* 高度隨寬度自適應(yīng) */ vertical-align: middle; /* 垂直居中對(duì)齊 */ } div { background-image: url(example.jpg); background-size: cover; /* 背景圖充滿整個(gè)元素 */ background-position: center center; /* 水平和垂直方向居中 */ } ``` 總之，針對(duì)圖片默認(rèn)出現(xiàn)空白的問題，在 CSS 中有多種解決方法。我們需要根據(jù)不同的情況進(jìn)行選擇，以達(dá)到美觀和合適的布局效果。