边框属性(border)：用来设定一个元素的边线。
边距属性(margin)：用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)：用来设置元素内容到元素边界的距离。
这三个属性都属于CSS中box类型的属性。

①margin:是外间距,padding:是内边距。例如现在有两个2mX2m的房子、房子与房子是有距离的。现在你坐在其中一个房子的中间，这时，你与你所在房子的墙之间就有了个距离。我们可以理解为CSS的padding。而你所在房子与另一个房子之间的距离就是margin.

②打个比方,在桌子上放了一个盒子,盒子里放了一个东西!把这个盒子看成是你的那个元素或者说是DIV,那么这个盒子离里面的东西的距离就是padding,而这个盒子里桌子边缘的距离,就是margin!

③<div   style= "   padding-top:100px;   margin-left:100px; "> www.soojs.com </div> 
padding-top:是www.soojs.com具div的高度 
margin-left:是div具BODY的高度

以下是我看到的比较好的文章：

http://www.cnblogs.com/wolf-sun/p/4329926.html

边框(border)边距(margin)和间隙(padding)属性的区别的更多相关文章

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

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

  2. border、margin、padding属性的区别

    可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml 本文参考:http://www.cnblogs.com/chinhr/arch ...

  3. padding(内边框), border(边框), margin, 标准文档流, 块级元素和行内元素, 浮动 ,margin的用法

    盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型 ...

  4. CSS——【元素内边距padding、元素外边距margin、元素边框border-width、元素大小width/height】与【元素显示大小】的关系

    一.基本知识 padding:元素内边距,指的是元素内边框到元素中内容的距离. 用法: padding:长度|百分比 padding-top:长度|百分比 padding-bottom:长度|百分比 ...

  5. border、margin、padding三者的区别

    当你写前端的时候,肯定会遇到border,margin和padding这几个单词. 如: padding: 16px 0; margin: 0 10px; 在CSS中,他们是表示距离的东西,很多人刚开 ...

  6. 关于盒模型的外边距padding和内边距margin

    边框border属性值  solid实线   dashed虚线   dotted点线   double双实线 /* 内边距 */padding:20px 30px 30px 30px;若有四个值代表  ...

  7. 用margin还是用padding

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

  8. 用Margin还是用Padding？（转载）

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

  9. {03--CSS布局设置} 盒模型 二 padding bode margin 标准文档流 块级元素和行内元素 浮动 margin的用法 文本属性和字体属性 超链接导航栏 background 定位 z-index

    03--CSS布局设置 本节目录 一 盒模型 二 padding(内边距) 三 boder(边框) 四 简单认识一下margin(外边距) 五 标准文档流 六 块级元素和行内元素 七 浮动 八 mar ...

随机推荐

  1. HTTP协议学习---（七）代理

    本文介绍一些HTTP代理服务器的概念和工作原理 阅读目录 什么是代理服务器 Fiddler就是个典型的代理 代理作用一:FQ 代理作用二:匿名访问 代理作用三:通过代理上网 代理作用四:通过代理缓存, ...

  2. WordPress翻译中 __()、_e()、_x、_ex 和 _n 的用法及区别

    编译函数 WordPress使用了下面几个函数来方便语言本地化. __() _e() _x() _ex() _n() 以上所列的函数是用来包含所需翻译的字符串的,根据字符串的不同参数和输出类型,需要使 ...

  3. Leetcode 131. Palindrome Partitioning

    Given a string s, partition s such that every substring of the partition is a palindrome. Return all ...

  4. Hibernate学习-在线书城后台管理系统的设计

    写在前面:小编经历了昨天一晚上加今天一整天的“不吃不喝(夸张点…总之就是把时间全分享给TA了)”终于把程序的问题全部解决了,小编现在的心情十分的开森,开森,开森,Happy,话不多说,直接进入正题: ...

  5. 常用sql语句整理[SQL Server]

    1. 存储过程 CREATE PROCEDURE [dbo].[bbs_move_createtopic] @fid smallint, @iconid smallint, @curtid INT O ...

  6. Scala的sealed关键字

    Scala的sealed关键字 缘起 今天在学习Akka的监控策咯过程中看到了下面一段代码: def supervisorStrategy(): SupervisorStrategy = OneFor ...

  7. ( 译、持续更新 ) JavaScript 上分小技巧(一)

    感谢好友破狼提供的这篇好文章,也感谢写这些知识点的作者们和将他们整理到一起的作者.这是github上的一篇文章,在这里本兽也就只做翻译,由于本兽英语水平和编程能力都不咋地,如有不好的地方也请多理解体谅 ...

  8. （译）你应该知道的jQuery小技巧

    帮助提高你jQuery应用的简单小技巧 回到顶部按钮 图片预加载 判断图片是否加载完 自动修补破损图像 Hover切换class类 禁用输入 停止正在加载的链接 toggle fade/slide 简 ...

  9. JAva使用DOM读取XML数据(解析)

    原来一切都是有套路的 使用DOM解析XML文档步骤 1.创建解析器工厂对象 DocumentBuildFactory对象 2.由解析器工厂对象创建解析器对象,即DocumentBuilder对象 3. ...

  10. 【Beta】Daily Scrum 第二天

    [目录] 1.任务安排 2.Burndown Chart 3.代码check-in 4.困难及总结 1.任务安排 学号尾数 昨天做的任务 今天做的任务 明天要做的任务 612 添加计时界面返回按键事件 ...