你在学习margin和padding的时候是不是懵了，——什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：

一、什么是边距

CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。

二、什么是内边距，什么是外边距

代码2-1：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  5. <style type="text/css">
  6. body{
  7. margin:0px;
  8. }
  9. .test1{
  10. width:150px;
  11. height:150px;
  12. border:6px solid red;
  13. }
  14. .test2{
  15. margin-top:40px;
  16. padding-top:40px;
  17. width:150px;
  18. height:150px;
  19. border:6px solid gray;
  20. }
  21. .test2_son{
  22. width:80px;
  23. height:50px;
  24. border:12px solid blue;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div class="test1">test1</div>
  30. <div class="test2">
  31. <div class="test2_son">test2_son</div>
  32. </div>
  33. </body>
  34. </html>

图01

说明：图01中灰色地带是class值为test2的div的边框，它是有宽度的；

①、外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级）的距离，如上图；

②、内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；

③、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值为test2_test div元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40px;”去掉，class值为test2_test div元素添加“margin-top:40px;”——这样的效果和代码2-1是一样的；

三、margin和padding的属性值

①、它们的默认值都是0；它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距，padding作用的元素由浏览器计算内边距；都
可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距，padding继承父元素内边距，但由于inherit在任何的版
本的 Internet Explorer （包括 IE8）都不支持，所以也就没有学习的必要了。

②、margin允许指定负的外边距值，不过使用时要小心；padding不允许指定负边距值；

③、margin和padding的属性值都可以有1个、2个、3个和4个：

a、margin有4个属性值(例如margin:10px 5px 15px 20px;)， 其含义是：上外边距10px、右外边距5px、下外边距15px、左外边距20px；

padding有4个属性值(例如padding:10px 5px 15px 20px;)，其含义是：上内边距10px、右内边距5px、下内边距15px、左内边距20px；

总结：无论是margin还是padding，如果有4个属性值，那么它们的作用方向顺时针  依次为上、右、下、左；

b、margin有3个属性值(例如margin:10px 5px 15px ;)， 其含义是：上外边距10px、右外边距和左外边距5px、下外边距15px；

padding有3个属性值(例如padding:10px 5px 15px;)，其含义是：上内边距10px、右内边距和左内边距5px、下内边距15px；

总结：无论是margin还是padding，如果有3个属性值，那么它们的作用方向顺时针  依次为上、右左、下；

c、margin有2个属性值(例如margin:10px 5px;)， 其含义是：上外边距和下外边距10px、右外边距和左外边距5px；

padding有2个属性值(例如padding:10px 5px;)，其含义是：上内边距和下内边距10px、右内边距和左内边距5px；

总结：无论是margin还是padding，如果有2个属性值，那么它们的作用方向顺时针  依次为上下、右左；

d、margin有1个属性值(例如margin:10px;)， 其含义是：4 个外边距都是 10px；

padding有1个属性值(例如padding:10px;)，其含义是：4 个内边距都是 10px；

总结：无论是margin还是padding，如果有1个属性值，那么它们的边距值都是相等的；

HTML CSS——margin和padding的学习的更多相关文章

  1. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  2. margin和padding的学习

    你在学习margin和padding的时候是不是懵了--什么他娘的内边距,什么他娘的外边距.呵呵呵,刚開始我也有点不理解,后来通过查资料学习总算弄明确了,如今我来谈一下自己对margin和paddin ...

  3. 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响

      一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...

  4. 关于margin、padding 对内联元素的影响

    内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin  padding 对inline元素的影响. 测 ...

  5. css 盒模型、box-sizing 学习笔记

    默认情况下,给元素设置的高度和宽度是元素内容区的宽度和高度,给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式: 元素的宽度= 元素的内容区宽度 + 内边距宽度 ...

  6. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  7. CSS中的margin和padding的用法和区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...

  8. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

  9. CSS中margin与padding的区别

    CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...

随机推荐

  1. 深入浅出OOP（四）: 多态和继承(抽象类)

    在本文中,我们讨论OOP中的热点之一:抽象类.抽象类在各个编程语言中概念是一致的,但是C#稍微有些不一样.本文中我们会通过代码来实现抽象类,并一一进行解析. Abstract Classes 在微软的 ...

  2. C#——Dictionary<TKey, TValue> 计算向量的余弦值

    说明:三角函数的余弦值Cos我想,每个学计算机的理工人都知道,但是真的明白它的用途,我也是刚明白.每个人在初中或者高中的时候,都有这么个疑惑,学三角函数干什么用的?很直白的答案就是考试用的.而且当时的 ...

  3. 分析system_call中断处理过程

    分析system_call中断处理过程 上周我们使用gcc内嵌汇编调用系统调用,这次我们具体分析下过程. 将getpid嵌入menuos 代码从github下载,步骤如下: 1. 增加一个函数,get ...

  4. Leetcode 13 Roman to Integer 字符串处理+STL

    题意:将罗马数字1到3999转化成自然数字,这里用了STL库map将罗马字符映射到自然数字. I,V,X,L,C,D,M -> 1,5,10,50,100,500,1000 m[s[i]]< ...

  5. Linux Buffers和Cached的区别(转)

    在linux下使用free命令查看内存使用情况,有buffers和cached两项,以下是它们的区别: buffers是为块设备设计的缓冲.比如磁盘读写,把分散的写操作集中进行,减少磁盘I/O,从而提 ...

  6. Windows下提升进程权限

    windows的每个用户登录系统后,系统会产生一个访问令牌(access token) ,其中关联了当前用户的权限信息,用户登录后创建的每一个进程都含有用户access token的拷贝,当进程试图执 ...

  7. 新版PHP 7效能實測：Drupal 7能快70%，碎形計算大勝Ruby和Python

    PHP 7才剛在12月3日正式釋出,網頁開發框架Zend公司立刻發表了一份PHP新舊版效能大車拼報告,除了PHP 7和PHP 5.6之外,也把HHVM 3.7版納入一起比較. Zend公司選擇了幾套知 ...

  8. NoteExpress 自定义参考文献输出样式

    最近在写硕士论文,样式中没有符合要求的,于是就自己来编辑下样式文件,下文是网上搜集的关于自定义参考文献的一篇教程,可以参考. 一.分隔符|和连接符*的使用 (1)连接符 * 主要作用是“建立依赖关系” ...

  9. WPS 文字排版 标题回车后标题号自动增加

    飞思卡来互联网提供全球性的 看了看 风格的呵呵 合格否d合格否的 secure embedded嵌入式解 个国家和地区,注册了成千上万项专利,产品面向 物联网,汽车电子,消费电子,工业及网络设备等市 ...

  10. 滑动返回类库SwipeBackLayout的使用问题，解决返回黑屏，和看到桌面

    SwipeBackLayout是一个很好的类库,它可以让Android实现类似iOS系统的右滑返回效果,但是很多用户在使用官方提供的Demo会发现,可能出现黑屏或者返回只是看到桌面背景而没有看到上一个 ...