目前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. spring quartz定时任务

    配置quartz 在spring中需要三个jar包: quartz-1.8.5.jar.commons-collections-3.2.1.jar.commons-logging-1.1.jar 首先 ...

  2. [原创]基于rsync算法的目的性改进-RexSync

    rsync是一种文件差异传输的算法,特点是高效且相似块识别率较高.具体算法这边就不赘述,网上很多,官方文档也描述的很清楚. rsync提高文件比对效率的一个核心算法之一就是rolling checks ...

  3. ASP.NET SignalR

    何为ASP.NET SignalR,有什么用 ASP.NET SignalR是一个ASP.NET库,是为了实现实时web通信而创造的,能让服务器与客户端实现即时通信,而不需要服务器等待接收到客户端请求 ...

  4. 去掉windows8.1鸡肋的开始按钮

    无开始按钮了,win8.1的 开始按钮反而非常鸡肋.. 可以使用我分享的链接下载startisgone: http://download.csdn.net/detail/wangallan/89728 ...

  5. 重构与模式(Refactoring to Patterns)-读书笔记

    第一章 ☛过度设计:是指代码的灵活性和复杂性超出所需. 第二章 ☛重构是一种保持行为的转换. 第三章 ☛每一个模式都是由三部分组成的规则,他表达的是某一环境,一个问题以及解决问题的方案之间的关系. ☛ ...

  6. BZOJ 3112: [Zjoi2013]防守战线 [单纯形法]

    题目描述 战线可以看作一个长度为n 的序列,现在需要在这个序列上建塔来防守敌兵,在序列第i 号位置上建一座塔有Ci 的花费,且一个位置可以建任意多的塔,费用累加计算.有m 个区间[L1, R1], [ ...

  7. NYOJ 762

    容斥原理 http://blog.csdn.net/shiren_bod/article/details/5787722

  8. Linux网卡配置及学习linux的注意事项

    一.网卡配置 1.ifconfig网卡信息,配置IP ifconfig eth0 192.168.2.102 2.修改网卡配置(连接不了可能是IP给占用了) 进入编辑界面命令:vi /etc/sysc ...

  9. sublime 插件

    由于之前的代码可视化方案太复杂,分析时间太长,不实用,另一方面是而且工作以后业余时间大大减少,因此决定放弃原有路线,从工作中最迫切的需求着手,逐步构建一个实用的工具. 新的方法仍然依赖understa ...

  10. Python 字符串

    Python访问字符串中的值 Python不支持单字符类型,单字符也在Python也是作为一个字符串使用. Python访问子字符串,可以使用方括号来截取字符串,如下实例: #!/usr/bin/py ...