目前web2.0已经越来被人们认可，因为喜欢搞web开发的人员不得不硬着头皮去学习web2.0的标准，其中很重要的一条就是新的布局规则，div+css。以前基本上是用table布局的，这种传统的方式简单直观，但是这新的标准我学习起来时常找不到北。下面就拿例子看看。

先介绍下两个字面上的含义：

  • margin 外边距
  • border 边框
  • padding 内边距

事例一：

　　 设置margin 那么他所占据的空白地方会是在边框外面

　　 设置padding 他所占据的空白地方是在边框里面，图解一下就更清楚了。

　　如上图,A,B两个方框,A代码padding,B代表margin,现在我们看A箭头与蓝色边框的距离,这就是padding叫做内边距,下面再来看看B外面的箭头与B之前的距离就是我们所说的margin的,叫做外间距,哈哈你现在应该明白了,什么是padding,什么是margin吧。

事例二：

　　看看css盒模型，下图！margin是 DIV与周边元素的距离padding是 DIV里边内容与这个DIV的距离

margin和padding的区别的更多相关文章

  1. CSS中margin和padding的区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...

  2. margin和padding的区别和用法

    margin和padding的区别和用法 什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...

  3. 【margin和padding的区别】

    margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...

  4. CSS中margin与padding的区别

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

  5. CSS属性margin、padding的区别

    原始状态 不设置margin和padding的状态 margin 设置外边距之后的状态 padding 设置内边距之后的状态 ,注意是撑开,外框高宽由300px变成450px. 说明:本文为原创作品, ...

  6. margin与padding的区别与用法—以及出现bug的解决方法

    margin(外边距) padding(内边距)   一.语法结构 (1)margin-left:10px; 左外边距 (2)margin-right:10px; 右外边距 (3)margin-top ...

  7. grivaty,margin和padding的区别

    layout_margn是指组件距离父窗体的距离, padding是指组件中的内容距离组件边缘的距离 Layout_grivaty与grivaty的区别 layout_grivaty是指组件相对父窗体 ...

  8. margin 和padding 的区别

    margin是用来隔开元素与元素的间距:padding是用来隔开元素与内容的间隔.margin用于布局分开元素使元素与元素互不相干: padding用于元素与内容之间的间隔,让内容(文字)与(包裹)元 ...

  9. HTML中margin与padding的区别！(转)

    我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名 ...

随机推荐

  1. Android上传文件至服务器(上)

    每一次都不能上首页,真悲催..管理员让我上一次首页? 很多时候我更愿意一个人写代码,与其在垃圾代码上改改改,我更愿意直接重构. 整洁的代码简单直接.整洁的代码如同优美的散文.整洁的代码从不隐藏设计者的 ...

  2. Spark调度管理（读书笔记）

    Spark调度管理(读书笔记) 转载请注明出处:http://www.cnblogs.com/BYRans/ Spark调度管理 本文主要介绍在单个任务内Spark的调度管理,Spark调度相关概念如 ...

  3. SCCM 2012 R2安装部署过程和问题（一）

    在进行Windows Server 2012 R2虚拟化测试前,由于需要安装,部署和管理很多的服务器,自然会想到该如何提高效率和有效的管理.在Windows Server 2008的时代微软已经提供称 ...

  4. CocoaPods报错：The dependency `AFNetworking ` is not used in any concrete target

    最近更新了下cocoapods,今天再pod update  就遇到这个错误: 大体意思就是说,库没有用到指定的target. 找了下资料,发现是新版CocoaPods在 Podfile里使用时,必须 ...

  5. js跨域那些事

    原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其 ...

  6. 漫谈c++11 Thread库之使写多线程程序

    c++11中最重要的特性之一就是对多线程的支持了,然而<c++ primer>5th却没有这部分内容的介绍,着实人有点遗憾.在网上了解到了一些关于thread库的内容.这是几个比较不错的学 ...

  7. 模-数（A/D）转换器

    一.A/D转换的基本原理 在一系列选定的瞬间对模拟信号进行取样,然后再将这些取样值转换成输出的数字量,并按一定的编码形式给出转换结果. 整个A/D转换过程大致可分为取样.量化.编码三个过程.二.取样- ...

  8. 【原】移动web页面支持弹性滚动的3个方案

    有段时间一直折腾移动端页面弹性滚动的各种问题,做了点研究,今天做个小分享~ 传统 pc 端中,子容器高度超出父容器高度,通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容,而移动we ...

  9. Namesilo 管理域名教程

    在NameSilo注册域名之后,我们要做的就是开始对域名进行日常管理应用.大家可以参照下面这个Namesilo域名管理图文教程进行相应的操作. 1. 登录域名管理列表并选择相应域名 首先,登录Name ...

  10. unity 实现物体破碎效果的一些方法 - 细雨淅淅

    游戏越来越接近现实的感觉,如果有一个真是的 虚拟现实设备,可能我们真的会感觉是在真实世界.场景的逼真是在渲染效果.角色AI.游戏逻辑.物理效果等等一起导致的结果.现在游戏越来越大,除了渲染,物理估计是 ...