                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /网页简单布局之结构与表现原则

最后练习题，为什么直接添加padding就能出现效果呢？

为什么直接添加padding：1px 20px 37px 30px;就能出现任务效果？我看下面有的童鞋有写定位的，又把宽高加上的，有写magin-right。

简单的padding:1px 20px 37px 30px; 是我想的有点少吗

Milkgreen

2016-07-21

源自：网页简单布局之结构与表现原则 3-3

关注问题我要回答

682

操作

收起

3 回答

慕妹7508549
2016-09-25

用实物做个模拟会很好理解，你在桌子上放个书本，在书本中间放个手机，你可以把桌子看成盒子，把书本看成背景图片，桌子颜色就是背景色，裸漏出来的桌子颜色就是margin，手机就是你要放上去修饰的东西，裸漏出来的书就是padding

0 回复有任何疑惑可以回复我~

收起回答

summer乐

真正的内容是香水瓶加上白色背景这部分，花纹是背景色，裸露出来的背景色范围就是padding的范围，我说的对吗？

2016-11-09 回复有任何疑惑可以回复我~

慕妹7508549 回复 summer乐

你说的对

2016-11-09 回复有任何疑惑可以回复我~

慕妹7508549
2016-09-25

你先去看下盒模型的知道，也就是用content margin padding border 计算盒子大小的方法，这个题背景图的大小就是盒子的总体大小，你在div下面，加个<hr/> 再加个img标签，调用一下背景图,截图，用PS测量一下，中间的空白就是你要放这个香水图的地方，他的大小就是 content，空白到顶的距离就是padding-top，空白到右是,以此类推，顺时针先上再右再下再左，这样图片就和背景图完美契合了，然后，margin是用来增加两个图之间的距离的，这个距离之间是用背景填充的，两者的距离为第一个的margin-右加上第二个的margin-左,在这个题中没有用到border。还有img是行内块标签，你需要去巩固一下，块标签，行内标签，行内块标签的知道。

0 回复有任何疑惑可以回复我~

收起回答

慕妹7508549

不能说这个背景图的大小就是盒子的大小，只能说盒子除去border和margin的大小，

2016-09-25 回复有任何疑惑可以回复我~

慕妹7508549

有什么问题可以问我，这个需要会ps切片知识，也要对html+css 理解的透彻一点才可以

2016-09-25 回复有任何疑惑可以回复我~