首頁 > web前端 > 前端問答 > html中如何調整圖片之間的間距

html中如何調整圖片之間的間距

青灯夜游
發布: 2021-06-21 16:03:40
原創
8700 人瀏覽過

html中,可以利用margin-left或margin-right屬性來調整圖片之間的間距,這兩個屬性分別可以設定元素的左右外邊距,只需要給圖片元素img加上「margin- left:值;」或「margin-right:值;」樣式即可。

html中如何調整圖片之間的間距

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

html中調整圖片之間的間距

新建一個html文件,命名為test.html;在test.html文件內,建立一個div,並設置其class屬性為dd。

 html中如何調整圖片之間的間距

在div內,使用img標籤建立兩張圖片,圖片名稱分別為1.jpg,3.jpg。

 html中如何調整圖片之間的間距

為了展示明顯的效果,對div進行樣式設定。設定div寬度為600px,高度為500px,居中顯示,同時設定1px灰色邊框。

 html中如何調整圖片之間的間距

html中如何調整圖片之間的間距

在test.html檔案內,使用margin屬性設定兩張圖片之間的距離。例如,設定1.jpg圖片距離3.jpg圖片30px,可以使用margin-right屬性設定。

html中如何調整圖片之間的間距

html中如何調整圖片之間的間距

#除此之外,還可以使用margin設定圖片上、下、左邊的外邊距。分別如下:

  • margin-left:左外邊距;

  • margin-top:上外邊距;

  • margin-bottom:下外邊距。

例如 ,使用margin-left設定圖片3.jpg左外邊距為30px,同樣可以達到上一步的效果。

 html中如何調整圖片之間的間距

html中如何調整圖片之間的間距

margin也可以同時設定圖片四邊的外邊距,順序為「上右下左」,例如,設定圖片1. jpg「上右下左」的外邊距為10px,20px,30px,40px。

推薦教學:《html影片教學

以上是html中如何調整圖片之間的間距的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板