css中如何设置两个图片之间的距离

Question

css中如何设置两个图片之间的距离

Answer 1

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。所以两个图片之间的距离可以用外边距（margin）来实现：

1	margin: top right bottom left;

示例：假设页面中放置了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">

• 如果通过css设置图片边距为零，则效果如下

1	img{margin:0;}

• 如果通过css设置图片各个方向的距离相等为10px，则效果如下

1	img{margin:10px;}

• 如果通过css设置图片不等距离：上下20px，左右10px，则效果如下

1	img{margin:20px 10px;}

 

Answer 2

可以通过内边距和外边距来设置
分别是padding和margin

css中padding和margin的区别

margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面