目前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. Linux From Scratch(从零开始构建Linux系统,简称LFS)- Version 7.7(二)

    七. 构建临时系统 1. 通用编译指南 a. 确认是否正确设置了 LFS 环境变量 echo $LFS b. 假定你已经正确地设置了宿主系统的符号链接: 1)shell 使用的是 bash. 2)sh ...

  2. 编程中Foo, Bar 到底什么意思?

    1 前言 在很多国外计算机书本和一些第三份开源软件的Demo中经常用到两个英文单词Foo,Bar.这到底是什么意思呢?从步入屌丝界的IT生活见到这两个单词到现在我还是不知道这两个单词的真正含义,今天有 ...

  3. Windows批处理:配置防火墙规则、开启远程桌面

    一.简介 公司主机加入域后,防火墙未进行设置,规则不统一,不少主机ping不通.另打算开启远程桌面,方便远程管理网内每台主机.曾在DC上测试过域组策略内的Windows防火墙设置,无论是新增规则还是直 ...

  4. Android原生游戏开发:使用JustWeEngine开发微信打飞机

    使用JustWeEngine开发微信打飞机: 作者博客: 博客园 引擎地址:JustWeEngine 示例代码:EngineDemo JustWeEngine? JustWeEngine是托管在Git ...

  5. 兼容可控硅调光的一款LED驱动电路记录

    1.该款电路为兼容可控硅调光的LED驱动电路,采用OB3332为开关控制IC,拓扑方案为Buck: 2.FB1:磁珠的单位是欧姆,而不是亨利,这一点要特别注意.因为磁珠的单位是按照它在某一频率 产生的 ...

  6. 转载文章----十步完全理解SQL

    转载地址:http://blog.jobbole.com/55086/ 很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程 ...

  7. BZOJ1878: [SDOI2009]HH的项链[树状数组 离线]

    1878: [SDOI2009]HH的项链 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 3486  Solved: 1738[Submit][Statu ...

  8. 转: Protobuf 的 proto3 与 proto2 的区别

    Protobuf 的 proto3 与 proto2 的区别   On 2015-07-17 19:16:00 By Soli   Protobuf 的 proto3 与 proto2 的区别 这是一 ...

  9. .Net的内置对象之一 Request

    一.Request简介 Request对象是.net的内置对象之一,也是.net中常用的对象,用于获取客户端的信息,可以使用Request对象访问任何基于HTTP请求传递的所有信息.通过Request ...

  10. OrcharNoCMS中的发布订阅使用

    对于Orchard里面的EventBus,没有太多的文章去介绍说明.它最好的应用是发布订阅的应用. 使用介绍: 在Car模块中,我们定义一个接口,继承IEventHandler接口. 当我们在创建一条 ...