何时应当使用margin：
需要在border外侧添加空白时。
空白处不需要背景（色）时。
上下相连的两个盒子之间的空白，需要相互抵消时。如15px + 20px的margin，将得到20px的空白。

何时应当时用padding：
需要在border内测添加空白时。
空白处需要背景（色）时。
上下相连的两个盒子之间的空白，希望等于两者之和时。如15px + 20px的padding，将得到35px的空白。

个人认为：margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。margin用于布局分开元素使元素与元素互不相干；padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段“呼吸距离”。

来自：http://www.hicss.net/use-margin-or-padding/

margin和padidng的使用的更多相关文章

  1. 金融量化分析【day112】：因子选股

    一.因子选股基础 二.因子选股策略实现代码 # 导入函数库 import jqdata import psutil #初始化函数,设定基准等等 def initialize(context): set ...

  2. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  3. 深入理解CSS中的margin负值

    前面的话 margin属性在实际中非常常用,也是平时踩坑较多的地方.margin折叠部分相信不少人都因为这样那样的原因中过招.margin负值也是很常用的功能,很多特殊的布局方法都依赖于它.它看似简单 ...

  4. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  5. CSS margin详解

    以下的分享是本人最近几天学习了margin知识后,大有启发,感觉以前对margin的了解简直太浅薄.所以写成以下文章,一是供自己整理思路:二是把知识分享出来,避免各位对margin属性的误解.内容可能 ...

  6. 基于Caffe的Large Margin Softmax Loss的实现（中）

    小喵的唠叨话:前一篇博客,我们做完了L-Softmax的准备工作.而这一章,我们开始进行前馈的研究. 小喵博客: http://miaoerduo.com 博客原文:  http://www.miao ...

  7. 基于Caffe的Large Margin Softmax Loss的实现（上）

    小喵的唠叨话:在写完上一次的博客之后,已经过去了2个月的时间,小喵在此期间,做了大量的实验工作,最终在使用的DeepID2的方法之后,取得了很不错的结果.这次呢,主要讲述一个比较新的论文中的方法,L- ...

  8. 由css reset想到的深入理解margin及em的含义

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

  9. 探究负边距（negative margin）原理

    W3C规范在介绍margin时有这样一句话: Negative values for margin properties are allowed, but there may be implement ...

随机推荐

  1. 详解 CSS 七种三栏布局技巧

    作者:林东洲 链接:https://zhuanlan.zhihu.com/p/25070186 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 三栏布局,顾名思义就是 ...

  2. Javascript：如何调用全局变量？

    怎样使用全局变量呢? window.globalVariableName 参考: https://blog.csdn.net/zyz511919766/article/details/7276089

  3. 【转载】容器技术 & Docker & 与虚拟化的比较

    看到10月份天天写博客,只有一天没写,非常棒! 11月份也基本每天都写,现在看到有三天没加新博客,应该是之前挖的坑太多了,需要填坑,呵呵. 那这篇文章是不是为了占坑呢?哈哈.我不说话. 容器技术,这篇 ...

  4. 【c++】面向对象程序设计之关于继承

    面向对象程序设计的核心思想是数据抽象(类的接口与实现分离).继承和动态绑定 基类 虚函数:基类希望派生类各自定义适合自身的版本的函数 在c++中,当我们使用基类的引用或指针调用虚函数时将发生动态绑定. ...

  5. linux 源码编译安装apache

    cc1 是c语言的编译器.

  6. es中插入数据

    es中插入数据 学习了:https://www.imooc.com/video/15769/0 分为指定Id和自动生成Id两种: 1,指定Id使用PUT操作 PUT http://127.0.0.1: ...

  7. google 集群计算的3大基础设施

    1.  GFS  分布式文件系统 2.  map-reduce 分布式计算框架 3. bigtable 海量key-value的存储 (开源实现:Hypertable)

  8. [WASM] Run WebAssembly in Node.js using the node-loader

    WebAssembly is great for targeting performance bottlenecks in the browser. Now with node-loader, we ...

  9. android笔记5——同一个Activity中Fragment的切换

    今天来模拟一个注冊的界面过程: 点击"下一步"之后: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZW5zb24xNjg1NQ==/f ...

  10. boost::serialization 用基类指针转存派生类（错误多多，一波三折）

    boost::serialization 也支持c++的多态,这样我们就能够通过使用基类的指针来转存派生类, 我们接着上一篇( boost::serialization(2)序列化基类 )的样例来看: ...