首頁(yè) 猿問(wèn) css中如何設(shè)置兩個(gè)圖片之間的距離

css中如何設(shè)置兩個(gè)圖片之間的距離

CSS3

繁星點(diǎn)點(diǎn)滴滴 2019-03-27 20:17:05

查看完整描述

2 回答

炎炎設(shè)計(jì)

TA貢獻(xiàn)1808條經(jīng)驗(yàn) 獲得超4個(gè)贊

CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。所以?xún)蓚€(gè)圖片之間的距離可以用外邊距（margin）來(lái)實(shí)現(xiàn)：

1	margin: top right bottom left;

示例：假設(shè)頁(yè)面中放置了2行共6張圖片

1 2	<img src="1.png" alt="example"><img src="1.png" alt="example"><img src="1.png" alt="example"> <img src="1.png" alt="example"><img src="1.png" alt="example"><img src="1.png" alt="example">

如果通過(guò)css設(shè)置圖片邊距為零，則效果如下

1	img{margin:0;}

如果通過(guò)css設(shè)置圖片各個(gè)方向的距離相等為10px，則效果如下

1	img{margin:10px;}

如果通過(guò)css設(shè)置圖片不等距離：上下20px，左右10px，則效果如下

1	img{margin:20px 10px;}

反對(duì) 回復(fù) 2019-03-30

素胚勾勒不出你

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊

可以通過(guò)內(nèi)邊距和外邊距來(lái)設(shè)置
分別是padding和margin

css中padding和margin的區(qū)別

margin 外邊距
border 邊框
padding 內(nèi)邊距
也就是說(shuō) 設(shè)置margin 那么他所占據(jù)的空白地方會(huì)是在邊框外面
設(shè)置padding 他所占據(jù)的空白地方是在邊框里面