1、css设置图片距离可以用盒子模型的margin属性。操作方法首先用html编辑器新建一个html文件,里面放入几张图片:
2、然后在上方的style中设置css的样式,设置img的margin属性为“0 30px”即可,其中前一个数字表示上下的距离,后一个数字表示左右的距离。最后在调整统一一下图片的大小,方便观察效果:
3、最后打开浏览器,就会看到2张图片之间是有距离的效果了:
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。所以两个图片之间的距离可以用外边距(margin)来实现:
margin: top right bottom left;
示例:假设页面中放置了2行共6张图片
如果通过css设置图片边距为零,则效果如下
img{margin:0;}
如果通过css设置图片各个方向的距离相等为10px,则效果如下
img{margin:10px;}
如果通过css设置图片不等距离:上下20px,左右10px,则效果如下
img{margin:20px 10px;}
可以通过内边距和外边距来设置
分别是padding和margin
css中padding和margin的区别
margin 外边距
border 边框
padding 内边距
也就是说 设置margin 那么他所占据的空白地方会是在边框外面
设置padding 他所占据的空白地方是在边框里面
有许多办法,图片可以放在div也可以放在table也可以放在ul、ol,可以用margin也可以用padding调节距离,也可以用clear:both清除两边,想学更多,你找我啊,我只要会的就告诉你。
img{padding:5px;}