边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。

——CSS权威指南

何时应当使用 margin ?

  • 需要在border外侧添加空白时。
  • 空白处不需要背景(色)时。
  • 上下相连的两个盒子之间的空白,需要相互抵消时(如 15px + 20px 的 margin,将得到 20px 的空白)。
  • margin 是用来隔开元素与元素的间距
  • margin用于布局分开元素使元素与元素互不相干。

何时应当时用 padding ?

  • 需要在border内测添加空白时。
  • 空白处需要背景(色)时。
  • 上下相连的两个盒子之间的空白,希望等于两者之和时(如 15px + 20px 的 padding,将得到 35px 的空白)。
  • padding 是用来隔开元素与内容的间隔。
  • padding 用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。

参考资料:http://www.hicss.net/use-marg...

用 margin 还是用 padding ?的更多相关文章

  1. 用margin还是用padding

    用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. 分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/use ...

  2. 用Margin还是用Padding?(转载)

    转载出自 海玉的博客 本文地址: http://www.hicss.net/use-margin-or-padding/ 用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. ...

  3. 通过margin负值去除padding

    .pay-type { // 图片布局前通过margin负值去除padding margin: 0 -@page-padding-horizontal; display: inline-flex; } ...

  4. 用Margin还是用Padding?

    用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时 ...

  5. 用Margin还是用Padding的区别

    用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时 ...

  6. 边框(border)边距(margin)和间隙(padding)属性的区别

    边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...

  7. <span>和<a>的margin上下和padding上下不起作用的原因和解决

    使用到了<span>和<a>标签,发现在样式里面直接写margin-top.margin-bottom和padding-top.padding-bottom都不起作用,页面样式 ...

  8. 不同浏览器的margin值与padding值

    IE-7: 有默认外边距margin样式的元素: dd,menu, ol, ul, blockquote, body, dd, dl, form, h1-6, ul 有默认内边距padding样式的元 ...

  9. css盒子模型、边框border、外边距margin、填充padding、轮廓outline

    盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...

  10. 用margin还是用padding?(3)—— 负margin实战

    看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left ...

随机推荐

  1. c# thread4——lock,死锁,以及monitor关键字

    多线程的存在是提高系统效率,挖掘cpu性能的一种手段,那么控制它,能够协同多个线程不发生bug是关键. 首先我们来看一段不安全的多线程代码. public abstract class Calcula ...

  2. linux启动内核源码分析

    内核的启动时从main.c这个文件里面的start_kernel函数开始的,这个文件在linux源码里面的init文件夹下面 下面我们来看看这个函数 这个函数很长,可以看个大概过去 asmlinkag ...

  3. 20190920 On Java8 第二十章 泛型

    第二十章 泛型 多态的泛化机制: 将方法的参数类型设为基类: 方法以接口而不是类作为参数: 使用泛型: 泛型实现了参数化类型 简单泛型 Java 泛型的核心概念:你只需告诉编译器要使用什么类型,剩下的 ...

  4. 记录将CentOS7linux系统python升级到3后yum安装是报错File "/usr/bin/yum", line 30 except KeyboardInterrupt, e: ^ SyntaxError: invalid syntax问题解决

    前两天将CentOS7里的python版本升级到了3.5.2 今天想装个解压软件,在执行yum install -y XXX 的时候报错 然后按照提示打开这个文件 vi /usr/bin/yum yu ...

  5. CodeForces 877E DFS序+线段树

    CodeForces 877E DFS序+线段树 题意 就是树上有n个点,然后每个点都有一盏灯,给出初始的状态,1表示亮,0表示不亮,然后有两种操作,第一种是get x,表示你需要输出x的子树和x本身 ...

  6. 所有的数据处理都是map-reduce

    用reduce求和 const sum = [1,2,3,4,5,6].reduce((v,t)=>{ return v+t; //第一次v=0,t=1 //第二次v= 0+1,t=2 //第三 ...

  7. EasyUI之DataGrid分页

    第一步创建分页DataGrid <table id="dg"> <thead> <tr> <th data-options="f ...

  8. C++11常用特性总结

    非原创,转载出处 http://www.cnblogs.com/feng-sc C++11已经出来很久了,网上也早有很多优秀的C++11新特性的总结文章,在编写本博客之前,博主在工作和学习中学到的关于 ...

  9. 自定义、操作cookie

    /** * 读取所有cookie * 注意二.从客户端读取Cookie时,包括maxAge在内的其他属性都是不可读的,也不会被提交.浏览器提交Cookie时只会提交name与value属性.maxAg ...

  10. 如何官网下载chrome谷歌浏览器离线安装包

    目录 1. 下载步骤 2. 将语言更改为中文 3. 插件 3.1. chrome 网上应用店 3.1.1. google-access-helper 4. 更新失败 1. 下载步骤 注意 需要梯子才能 ...