首頁 > web前端 > css教學 > css如何設定圖片之間的間隔

css如何設定圖片之間的間隔

藏色散人
發布: 2020-11-30 17:13:55
原創
14331 人瀏覽過

css設定圖片之間的間隔的方法:首先新建一個html文件,並建立一個div;然後在div內使用img標籤建立兩張圖片;最後使用margin屬性設定兩張圖片之間的距離即可。

css如何設定圖片之間的間隔

本教學操作環境:windows10系統、css3,本文適用於所有品牌的電腦。

推薦:《css影片教學

新html文件,命名為test.html,用於講解css中如何設定兩個圖片之間的距離。

css如何設定圖片之間的間隔

在test.html檔案內,建立一個div,並設定其class屬性為dd,用於下面對div進行css樣式設定。

 

css如何設定圖片之間的間隔

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

 

css如何設定圖片之間的間隔

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

 

css如何設定圖片之間的間隔

css如何設定圖片之間的間隔

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

 

css如何設定圖片之間的間隔

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

margin-left:左外邊距;

margin-top:上外邊距;

margin-bottom:下外邊距。

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

 

css如何設定圖片之間的間隔

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

 

css如何設定圖片之間的間隔

以上是css如何設定圖片之間的間隔的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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