padding-top和margin-top的区别

学习前端知识，对我们查找页面元素很有帮助，而且自己在原公司时，有参与一个QA系统，自己去设计了这个产品，出了原型图，同时设计了几个页面，希望通过做这个产品提高自己的技术，可是因为离职，所以计划搁浅了，现在希望可以完成这个系统。

 

需求：Q系统主页有一个消息提醒区，距离上一个div大概16px距离，该提醒区的边框为#ff9933色。

问题：设计了如下的css样式，但是显示的边框包含了与上面div的空白地方。

代码如下：

.notice{

/*padding-top: 16px;*/

height: 116px;

width: 100%;

margin: auto;

/*position:relative;*/

border: thin solid #ff9933;

margin-top:18px;

 

}

展示出来的样式如下图：

 

 

修改后代码如下：

.notice{

/*padding-top: 16px;*/

height: 116px;

width: 100%;

margin: auto;

/*position:relative;*/

border: thin solid #ff9933;

margin-top:18px;

 

}

结果正确：

问题原因说明：
padding用在容器内部，margin用在容器外部

比如：
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；
margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不饱含在容器内。

 

 

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　发布日期：2014-03-26 18:35