先看看这张图:

重点其实是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. arm-linux-gcc安装使用教程

    arm-linux-gcc如何下载安装2(转) [转]ubuntu下交叉编译环境构建(arm-linux-gcc-3.4.1.tar.bz2 ) 2009-03-03 10:05 1.下载arm-li ...

  2. NumPy教程目录

    NumPy Ndarray对象 NumPy数组属性 NumPy数据类型 NumPy数组创建例程 NumPy来自现有数据的数组 NumPy来自数值范围的数组 NumPy切片和索引 NumPy - 高级索 ...

  3. FlatBuffer入门笔记

    FlatBuffer入门笔记 1 flatbuffer资料 flatbuffer下载地址:https://github.com/google/flatbuffers flatbuffer官方使用文档: ...

  4. 在.net中运用HTMLParser解析网页的原理和方法

    本文介绍了.net 版的一个HTMLParser网页解析开源类库(Winista.HTMLParser)的功能特性.工作原理和使用方法.对于使用.net进行Web信息提取的开发人员进行了一次HTMLP ...

  5. 作业列表 of《软件测试技术》

    作业1(截止时间3月22日) 请使用excel模板或word模板,完成对126邮箱登录功能的测试用例编写,界面如下图.提交到ftp. --------------------------------- ...

  6. Kotlin------类和对象(二)

    get/set方法 声明一个属性的完整语法是 var <propertyName>[: <PropertyType>] [= <property_initializer& ...

  7. Mysql5.7基于事务转为基于日志

    先决条件 master端执行 flush logs;show master status; 获取file和position slave端执行 stop slave; change master to ...

  8. UVA-1619 Feel Good (单调队列)

    题目大意:给一个非负整数序列,求出一个使得区间和乘以区间最小值最大的区间. 题目分析:单调队列.维护两个数组,l[i]表示以a[i]为最小值的左半区间的最左边端点,r[i]表示以a[i]为最小值的右半 ...

  9. Regression 手动实现Gradient Descent

    import numpy as np import matplotlib.pyplot as plt x_data = [338.,333.,328.,207.,226.,25.,179.,60.,2 ...

  10. mysql中一个字段根据另一字段的值分割为不同列

    1.数据结构如下: vehicleId mileage_type mileage 11AM6897           0 120 11AM6897           1 60 13AY9180 0 ...