html图片距离左侧,css怎么调图片间距?

在css中,设置两个图片之间的距离,主要使用margin属性来设置,可以实现对图片上下左右的外边距进行控制。下面我们来看一下css中如何设置图片的间距。

93a7875a92b6bd4543bd5d9d6456e180.png

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

示例:假设页面中放置了2行共6张图片exampleexampleexample

exampleexampleexample

如果通过css设置图片边距为零,则效果如下img{margin:0;}

1690eeb427e7fc75708ceefdcffc8bc9.png

如果通过css设置图片各个方向的距离相等为10px,则效果如下img{margin:10px;}

d54d8f5f92b5ee34d6e03013b07fbdf1.png

如果通过css设置图片不等距离:上下20px,左右10px,则效果如下img{margin:20px 10px;}

870e4ac27913fea180f34a3312134a6d.png

margin属性:

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

注释:允许使用负值。

属性值:auto 浏览器计算外边距。

length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

% 规定基于父元素的宽度的百分比的外边距。

inherit 规定应该从父元素继承外边距。

  • 6
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值