zoukankan      html  css  js  c++  java
  • padding-top和margin-top的区别

    学习前端知识,对我们查找页面元素很有帮助,而且自己在原公司时,有参与一个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个像素,不饱含在容器内。
     
     
     
     
                                            发布日期:2014-03-26 18:35
  • 相关阅读:
    找东西
    检测内存泄漏
    八月份月度反思
    博客之路
    快速开发~Rafy框架的初步认识
    VS快捷键的简单总结
    web前端使用工具的总结
    直接把数据库中的数据保存在CSV文件中
    AngularJs HTML DOM、AngularJS 事件以及模块的学习(5)
    AngularJS控制器和AngularJS过滤器的学习(3)
  • 原文地址:https://www.cnblogs.com/meitian/p/3683377.html
Copyright © 2011-2022 走看看