CSS中,我們可以使用margin屬性來讓圖片之間有間隔,這個(gè)屬性可以定義圖片邊緣與其周圍元素(包括其他圖片)之間的空間。
我們需要了解CSS中的margin屬性是如何工作的,在CSS中,margin屬性接受一個(gè)值,這個(gè)值可以是具體的像素值,也可以是一個(gè)相對(duì)的值(如em或%),這個(gè)值將決定圖片邊緣與其周圍元素之間的空間大小。
如果我們想要讓圖片之間有等量的間隔,我們可以給每個(gè)圖片元素都設(shè)置相同的margin值,如果我們想要讓圖片之間有10像素的間隔,我們可以這樣寫:
img { margin: 10px; }
這樣,每個(gè)圖片元素都會(huì)有一個(gè)10像素寬的邊緣,這個(gè)邊緣會(huì)將其與其他圖片元素分開。
我們也可以通過設(shè)置margin-top、margin-right、margin-bottom和margin-left屬性來分別控制圖片各個(gè)方向上的間隔,如果我們想要讓圖片在頂部和底部之間有20像素的間隔,而在左側(cè)和右側(cè)之間有10像素的間隔,我們可以這樣寫:
img { margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; }
這樣,圖片在垂直方向上會(huì)有20像素的間隔,而在水平方向上會(huì)有10像素的間隔。