先看看这张图:

重点其实是background-image

CSS边距属性定义元素周围的空间。通过使用单独的属性,可以对上、右、下、左的外边距进行设置。也可以使用简写的外边距属性同时改变所有的外边距。——W3School
边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。——CSS权威指南

padding称呼为内边距,其判断的依据即边框离内容正文的距离,而我喜欢CSS权威指南解释的“补白”(或者叫“留白”),因为他很形象。补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。——CSS权威指南

关于什么时候用margin什么时候用padding,margin和padding在许多地方往往效果都是一模一样,而且你也不能说这个一定得用margin那个一定要用padding,因为实际的效果都一样,你说margin用起来好他说padding用起来会更好,但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的:

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

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

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

何时使用padding和margin的更多相关文章

  1. 当padding,margin,top为百分比值,具体数值如何计算

    padding以及margin的四个方向设置值为百分数的时候,是以父元素的宽度为基数来进行计算. (为了保持横向和纵向方向上的margin/padding一致,但是其实也不是一定以父元素的宽度为参照物 ...

  2. 用padding与margin做多个元素的等间距分布

    这样做的好处是不管有多少个元素等间距分布,都可以直接写在li中,而且由于是给a设定的样式,所以在字数不一致的情况下,样式仍然是统一的. html: <!DOCTYPE html> < ...

  3. 关于padding与margin的区别

    代码一:全为padding. <!doctype html><html><head>    <meta charset="UTF-8"&g ...

  4. HTML中行内元素的竖直方向的padding和margin是否真的无效

    参考资料:Inline elements and padding 今天写一个导航栏时遇到了一个问题:行内元素的padding-top,padding-bottom和margin-top,margin- ...

  5. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  6. css padding和margin的百分比

    前段时间我同事对于margin和padding应用百分比值似乎有些误解,觉得可能是个普遍问题,所以觉得有必要拿出来单独写一下. margin和padding都可以使用百分比值的,但有一点可能和通常的想 ...

  7. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

  8. 行内元素和块级元素的具体区别是什么?行内元素的padding和margin可设置吗?

    块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示; 宽度(width).高度(height).内边距(padding)和外边距(margin)都可控制; ...

  9. border,padding,margin盒模型理解

    安静的敲着键盘,已势不可挡的姿势逼近php,我想我是一个幸福的人,未来不可期,做好现在,偶尔写着自己能看懂的API,慢慢悠悠的回味一下前端基础知识. 本文盒模型理解. <!DOCTYPE htm ...

  10. 【转】图解CSS padding、margin、border属性

    http://www.cnblogs.com/linjiqin/p/3556497.html 图解CSS padding.margin.border属性W3C组织建议把所有网页上的对像都放在一个盒(b ...

随机推荐

  1. 解题报告:hdu2191汶川地震 - 多重背包模板

    2017-09-03 17:01:36 writer:pprp 这是一道多重背包裸题 - 记得是从右向左进行,还有几点需要注意啊,都在代码中表示出来了 代码如下: /* @theme:hdu2191 ...

  2. [spring]Bean注入——使用注解代替xml配置

    使用注解编程,主要是为了替代xml文件,使开发更加快速. 一.使用注解前提: <?xml version="1.0" encoding="UTF-8"?& ...

  3. 实例化后的list的默认值

    public class List默认值 { public static void main(String[] args) { List<String> arrayList = new A ...

  4. [嵌入式培训笔记]----Linux命令简介

    Linux文件系统的结构类似一棵树,是从一个树根生长出来的.树根叫做/.从树根长出很多分叉,就这么一直生长下去.我们使用Linux操作系统的时候总是落在某个分叉上.ls命令可以帮助我们查看当前分叉上所 ...

  5. 继承AbstractRoutingDataSource再通过AOP实现动态数据源切换

    package com.zdd.data.aspect; import java.util.ArrayList; import java.util.HashMap; import java.util. ...

  6. [JS]JavaScript判断操作系统版本

    function detectOS() { var sUserAgent = navigator.userAgent; var isWin = (navigator.platform == " ...

  7. js获取显示器、页面等高度 (转)

    网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth ...

  8. 三、dbms_pipe(类似UNIX系统的管道)

    1.概述 说明:Oracle管道类似UNIX系统的管道,但不采用OS机制实现,管道信息被缓存到SGA中,当关闭例程时会丢失管道信息,建立公用管道所有数据库用户都可访问,私有管道只能由建立这访问.作用: ...

  9. 【转】netlink socket编程实例

    [转]netlink socket编程实例 转自:http://blog.chinaunix.net/uid-14753126-id-2983915.html 关于Netlink IPC方式的介绍,请 ...

  10. PHP stripos()、strripos()和strrpos() 使用方法和区别

    区别 stripos():查找字符串首次出现的位置(不区分大小写) 写法:stripos ( string $haystack , string $needle [, int $offset = 0 ...