html調(diào)整圖片之間間距的方法

本篇內(nèi)容主要講解“html調(diào)整圖片之間間距的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html調(diào)整圖片之間間距的方法”吧!

html中，可以利用margin-left或margin-right屬性來調(diào)整圖片之間的間距，這兩個(gè)屬性分別可以設(shè)置元素的左右外邊距，只需要給圖片元素img添加“margin-left:值;”或“margin-right:值;”樣式即可。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

html中調(diào)整圖片之間的間距

新建一個(gè)html文件，命名為test.html；在test.html文件內(nèi)，創(chuàng)建一個(gè)div，并設(shè)置其class屬性為dd。

在div內(nèi)，使用img標(biāo)簽創(chuàng)建兩張圖片，圖片名稱分別為1.jpg，3.jpg。

為了展示明顯的效果，對div進(jìn)行樣式設(shè)置。設(shè)置div寬度為600px，高度為500px，居中顯示，同時(shí)設(shè)置1px灰色邊框。

在test.html文件內(nèi)，使用margin屬性設(shè)置兩張圖片之間的距離。例如，設(shè)置1.jpg圖片距離3.jpg圖片30px，可以使用margin-right屬性進(jìn)行設(shè)置。

除此之外，還可以使用margin設(shè)置圖片上、下、左邊的外邊距。分別如下：

• margin-left：左外邊距；

• margin-top：上外邊距；

• margin-bottom：下外邊距。

例如 ，使用margin-left設(shè)置圖片3.jpg左外邊距為30px，同樣可以實(shí)現(xiàn)上一步的效果。

margin還可以同時(shí)設(shè)置圖片四邊的外邊距，順序?yàn)椤吧嫌蚁伦蟆?，例如，設(shè)置圖片1.jpg“上右下左”的外邊距為10px，20px，30px，40px。

到此，相信大家對“html調(diào)整圖片之間間距的方法”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！