margin和padding

来源:3-1 首页.页面框架代码编写

weixin_慕后端3589192

2019-09-05 10:23:32

.banner{

width: 802px;

margin: 0 auto;

height: 414px;

padding: 9px 0 0 198px;

}

老师,我理解的margin是设置一个盒子与它外界之间的间距 ,padding是设置一个盒子与它里面的内容之间的间距。那么在课程中的这个例子,设置banner的宽度为802px,不应该设置它的margin为9px 0 0 198px吗?为什么设置的是padding?但是我试了一下,在宽度为802px的情况下,设置margin和padding的效果一样,这里有点不太理解,这是为什么呢?

写回答

1回答

好帮手慕码

2019-09-05

同学你好!

同学对于margin和padding的理解是对的,这里设置padding也是可以的。某些情况下他们能实现的效果一致。举个简单的例子:

http://img.mukewang.com/climg/5d7083e400018abf04090168.jpg

效果:

http://img.mukewang.com/climg/5d7083ed0001ade101570056.jpg

使用margin设置,拉开两个p之间的间距:

http://img.mukewang.com/climg/5d70848100013ad003400184.jpg

效果:

http://img.mukewang.com/climg/5d7084900001513601770068.jpghttp://img.mukewang.com/climg/5d7084770001416101340084.jpg

使用padding设置,拉开两个p之间的间距:

http://img.mukewang.com/climg/5d7085120001c9ef03130170.jpg

效果:

http://img.mukewang.com/climg/5d7084ef000138ef02540070.jpghttp://img.mukewang.com/climg/5d7084fd0001ce5002920086.jpg

如果帮助到了你,欢迎采纳,祝学习愉快~

0

0 学习 · 14456 问题

查看课程