首页 » 网站建设 »

图片周围用padding和margin的区别

2014年12月29日 / 337次阅读
CSS

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

网页上的图片,如果在文字边上,最好是能够让图片跟文字有些距离。

我们通过CSS创造这种距离的方式有两种,加padding,或者加margin。如果图片没有带上链接,即没有<a>在图片前后,看不出什么区别。但是,如果有链接呢?

有链接,如果是加的padding,会造成一个效果,即padding所在的区域,链接依然有效,这时鼠标还没有移动到图片内容区域。所以,这种情况,最好是用margin来做效果。

云上小悟single.php内,那个靠右边的文章特色图片,就是用的margin。

 

补充:

后来发现,其实,这跟浏览器的实现有关!以上内容并不绝对。用padding或margin的一个区别就是在使用border的时候,padding会让border扩大。

 

2017-11-17:

还是看W3school制作的图片一目了然:

CSS的框模型

CSS的框模型

本文链接:http://www.maixj.net/wz/padding-margin-1829
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《图片周围用padding和margin的区别》有1条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 麦新杰

    使用padding,表示这个区域是主体的一部分;使用margin,表示这个区域不是主体的一部分,在主体的外面。 [ ]


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

Ctrl+D 收藏本页

栏目

AD

ppdai

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top