学习前端知识，对我们查找页面元素很有帮助，而且自己在原公司时，有参与一个QA系统，自己去设计了这个产品，出了原型图，同时设计了几个页面，希望通过做这个产品提高自己的技术，可是因为离职，所以计划搁浅了，现在希望可以完成这个系统。
需求：Q系统主页有一个消息提醒区，距离上一个div大概16px距离，该提醒区的边框为#ff9933色。
问题：设计了如下的css样式，但是显示的边框包含了与上面div的空白地方。
代码如下：
.notice{
/*padding-top: 16px;*/
height: 116px;
100%;
margin: auto;
/*position:relative;*/
border: thin solid #ff9933;
margin-top:18px;
}
展示出来的样式如下图：
修改后代码如下：
.notice{
/*padding-top: 16px;*/
height: 116px;
100%;
margin: auto;
/*position:relative;*/
border: thin solid #ff9933;
margin-top:18px;
}
结果正确：
问题原因说明：
padding用在容器内部，margin用在容器外部
比如：
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；
margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不饱含在容器内。
padding用在容器内部，margin用在容器外部
比如：
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素，是包含在容器内的；
margin-top:10px;是指容器本身的顶部距离其他容器有10个像素，不饱含在容器内。
发布日期：2014-03-26 18:35