padding-top和margin-top的区别
2024-08-24 05:14:29
学习前端知识,对我们查找页面元素很有帮助,而且自己在原公司时,有参与一个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用在容器内部,margin用在容器外部
比如:
padding-top:10px;是指容器内的内容距离容器的顶部有10个像素,是包含在容器内的;
margin-top:10px;是指容器本身的顶部距离其他容器有10个像素,不饱含在容器内。
发布日期:2014-03-26 18:35
最新文章
- tomcat开发远程调试端口以及利用eclipse进行远程调试
- Java进击C#——语法之IO操作
- 使用Logstash进行日志分析
- 常用算法——排序(一)
- cxf restful
- ios svn无法连接xp或者win7系统svn的解决方法
- 关于vs生成app错误提示,提醒Execution failed for task ':transformClassesWithDexForDebug'.
- ready是先执行的,load后执行,DOM文档的加载步骤
- 用SQLSERVER里的bcp命令或者bulkinsert命令也可以把dat文件导入数据表
- I.MX6 SHT20 Linux 驱动移植
- iOS-画板的实现
- Lucene学习笔记: 四,Lucene索引过程分析
- JavaScript面试问题:事件委托和this
- MongoDB - Introduction to MongoDB, BSON Types
- POJ 3126 Prime Path 素数筛,bfs
- 安装sql server提示挂起报错
- worklight 中添加时间控件
- flex实现股票行情走势图
- iOS动态运行时方法
- 如何最简单的优化MySql