margin、padding概念区别初探

我觉得margin和padding不能统一说成“外边距和内边距”或者“外填充和内填充”

下面CSS注释部分当使用margin-top和padding-top时对#footer-1子盒子和#footer父盒子样式效果是有区别的

我想要的效果是父盒子处在自己在正常文档流位置相对其他盒子不动，而让子盒子顶部“填充30px”以此改变子盒子内容区上部与父盒子上边框内部之间的距离

当使用margin-top时，没有达到想要的效果，此时子盒子内容区上部依然紧紧贴着父盒子上边框内部，而父盒子上边框外部与其它盒子之间的距离会拉达30px

当使用padding-top时，达到了想要的效果

现在不是特别理解这两者的区别，不过我觉得margin和padding应该一个说成“外边距”一个说成“内填充”会好点

[HTML]

1 <div id="footer">
2     <div id="footer-1">
3         友情链接
4     </div>
5 </div>

 

[CSS]

 1 #footer {
 2     width:100%;
 3     height:245px;
 4     background-color:black;
 5     position:relative;
 6     color:white;
 7 }
 8 
 9 #footer-1 {
10     width:1200px;
11     margin:0 auto;
12     color:white;
13     padding-top :30px;/*margin-top:30px;*/
14     padding-bottom:10px;
15     border-bottom:5px solid #FE6300;
16 }

 

 

查阅了一下资料，这个现象叫做Collapsing Margins，这是CSS2.1的一个诡异的规定

先丢个链接自己好好看看原因以及各种解决方法：

http://www.cnblogs.com/hejia/archive/2013/05/26/3099697.html

http://www.jb51.net/css/75789.html

父元素与子元素之间的margin-top问题(css hack)

<margin-bottom也会如此，估计margin-left/margin-right也会>

posted @ 2015-12-04 15:56  Arlar  阅读(301)  评论(0)  编辑  收藏  举报