在開發(fā)網(wǎng)頁時，我們不僅需要使用文字來傳達(dá)信息，還需要使用圖片來豐富網(wǎng)頁的視覺體驗(yàn)。但有時候我們會發(fā)現(xiàn)圖片與文字之間的距離不合適，需要將圖片下移，以更好地與文本配合。這時候，我們就需要用 CSS 來實(shí)現(xiàn)這個效果。下面就讓我們一起來看看如何在 CSS 中將圖片下移吧。 首先，我們需要了解兩個 CSS 屬性：display 和 margin。display 屬性可用于指定元素的布局類型，而 margin 屬性則可以用來設(shè)置元素之間的距離。 下面是一個例子，其中我們將一個圖片和一個段落都放在同一個 div 標(biāo)簽中。

<div>
<img src="example.jpg" alt="example">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>

這時候，我們需要在 CSS 中指定該 div 標(biāo)簽的 display 屬性為 block，以使其自動換行，并在圖片下面創(chuàng)建一個新的段落。

<style>
div {
display: block;
}
p {
margin-top: 0;
}
</style>

這個例子中，我們同時還需要使用 margin-top 屬性將段落的上邊距設(shè)置為 0。如果不設(shè)置該屬性，會發(fā)現(xiàn)段落與圖片之間仍有一段距離，這不是我們想要的效果。 接下來，讓我們使用 margin-bottom 屬性將圖片下移。

<style>
div {
display: block;
}
p {
margin-top: 0;
}
img {
margin-bottom: 20px;
}
</style>

這時候，你會發(fā)現(xiàn)圖片的下方出現(xiàn)了一個 20px 的空白，該空白就是我們設(shè)置的圖片下移距離。你可以根據(jù)需要調(diào)整該值，以得到最合適的效果。 到這里，我們就成功地使用 CSS 將圖片下移了。同時，通過使用 margin-top 和 margin-bottom 屬性，我們還可以調(diào)整文本與圖片之間的距離，以得到最佳的視覺效果。