边框属性(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. Selenium+WebDriver+Python 定时控制任务

    为了更对得起"自动化测试"的名号,我们可以设置定时任务,使我们自动化脚本在某个时间点自动运行脚本,这样就可以让测试在夜间进行,减少了时间成本.通过程序来控制test case在什么 ...

  2. SPAN的高度问题

    FIRST OF ALL,最容易令人忽略而导致头疼的因素.web页面文档类型: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  3. 虚拟机NAT模式无法上网问题的解决办法

    在使用CentOS虚拟机时,出现了无法上网的情况,使用主机ping虚机地址可以ping通,而虚机ping不通主机,同时虚机也无法ping通其他的网址或ip,显示内容为Network is unreac ...

  4. 【poj1011】 Sticks

    http://poj.org/problem?id=1011 (题目链接) 题意 给出一大堆小棍子的长度,需要把他们拼成几根长度相等的大棍子,求大棍子的最短长度. Solution 经典搜索题,剪枝剪 ...

  5. 跨平台开发之阿里Weex框架环境搭建（二）

    爱编程爱分享,原创文章,转载请注明出处,谢谢! http://www.cnblogs.com/fozero/p/5995195.html 上篇文章(http://www.cnblogs.com/foz ...

  6. AngularJs ngClass、ngClassEven、ngClassOdd、ngStyle

    这几个都关于样式及类名修改的,所以先把样式代码贴上吧. .red{color:red} .blue{color:blue} 写案例用到的样式就这么简单的两个,下面进入正题. ngClass ngCla ...

  7. System.IO.Directory.Delete目录删除

    在程序运行的时候,如果直接获取一个目录路径,然后执行删除(包括子目录及文件): System.IO.Directory.Delete(path,true); 或者 System.IO.Director ...

  8. Docker入门教程（六）另外的15个Docker命令

    Docker入门教程(六)另外的15个Docker命令 [编者的话]DockerOne组织翻译了Flux7的Docker入门教程,本文是系列入门教程的第六篇,继续介绍Docker命令.之前的第二篇文章 ...

  9. SaltStack配置管理之状态模块和jinja2（五）

    官方文档 https://docs.saltstack.com/en/latest/topics/states/index.html 配置管理之SLS Salt  State  SLS描述文件(YAM ...

  10. Yocto开发笔记之《Makefile编写》（QQ交流群：519230208）

    开了一个交流群,欢迎爱好者和开发者一起交流,转载请注明出处. QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ...