边框属性(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. Js-加密

    1.base64加密 在页面中引入base64.js文件,调用方法为: <!DOCTYPE HTML> <html> <head> <meta charset ...

  2. selenium启动IE浏览器报错：Unexpected error launching Internet Explorer. Browser zoom level was set to

    解决此问题的方法就是查看自己的浏览器是否没有放大至100%,如下 如果不是100%就会报错

  3. 关于在Eclipse中运行java程序报出：The project:XXXX which is referenced by the classpath10

    1.work_space名称与project是否一样,如果是一样的可能会导致错误. 2.project所在的文件夹中的.mymetadata文件中定义的project-module名称是否与proje ...

  4. 【CodeForces 589F】Gourmet and Banquet（二分+贪心或网络流）

    F. Gourmet and Banquet time limit per test 2 seconds memory limit per test 512 megabytes input stand ...

  5. Linux基础1

    1.Linux文件系统类型 ext2 ext3(rhel5) ext4(rhel6) lvm raid swap gfs nfs vfat 2.linux 系统通过磁盘接口识别磁盘 IDE接口 hda ...

  6. PHP热身

    0.环境说明 win10 xampp phpstorm xampp带了apache和mysql以及phpmyadmin 1.配置mysql:修改默认编码 关mysql xampp/mysql/bin/ ...

  7. 【BZOJ-4281】Związek Harcerstwa Bajtockiego 树上倍增LCA

    4281: [ONTAK2015]Związek Harcerstwa Bajtockiego Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 167  ...

  8. SVN+Jenkins或CCNET环境部署图

    目前来说比较常用的方案:

  9. GCD XOR, ACM/ICPC Dhaka 2013, UVa12716

    不同的枚举方法,效率完全不同.值得记录一下! #include <cstdio> #include <cstring> , count = ; ]; void pre() { ...

  10. HDU 4388 To the moon

    传送门 To the moon Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) ...