目前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. ubuntu系统安装软件方法

    ubuntu系统安装软件方法 ubuntu下安装软件有三种方式,分别为在线安装apt-get方式,软件商店安装方式和 1. 软件商店安装方式 这种方式对经常使用windows系统的同学来说最为简单,因 ...

  2. wordpress-4.4.1 数据库表结构解析

    wordpress-4.4.1.zip 安装包  SQL结构 : wp_commentmeta  :文章评论额外信息表. CREATE TABLE IF NOT EXISTS `wp_commentm ...

  3. centos7安装python3

    下载python3.5.2 wget http://mirrors.sohu.com/python/3.5.2/Python-3.5.2.tgz 如果提示错误可能是wget没有安装,用yun -y i ...

  4. Windows server用好windows server backup,发挥个人电脑该有的系统还原功能

    笔记本上安装windows server的各位是不是有个感触,默认软件升级.软件更新,系统是没有系统还原的(磁盘清理发现也没有还原点可清理),也就是系统出了问题,还原不了干着急. 其实,windows ...

  5. linux 命令之grep

    grep主要用来在文件中进行正则查找 通常都会将高亮颜色打开,方便阅读,为grep建立一个别名alias放到.bashrc等文件中: alias grep='grep --color=auto' 最常 ...

  6. JAVA开发过程中的各种小坑

    1.有时候你在本地跑的ECLIPSE中得到的正确的结果,部署到服务器上使用其他容器,如tomcat或WARS的时候,跑出的结果也许就不一致, 我们程序员会经常抱怨,在我机器上跑的好好的. 在不同的容器 ...

  7. Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。

      解决方法:   下载Win10的中文语言包.

  8. C#基础-事件 继承类无法直接引发基类的事件

    An event can be raised only from the declaration space in which it is declared. Therefore, a class c ...

  9. EF with (LocalDb)V11.0

    EF虽说对LocalDb支持的不错,但LocalDb有自身的缺陷(不想sqlite那样数据库文件可以像普通文件一样使用). LocalDb在一个计算机上会对数据库有唯一性约束,要求本机的localdb ...

  10. mysql添加索引命令

    创建脚本 1.PRIMARY  KEY(主键索引)mysql>ALTER  TABLE  `table_name`  ADD  PRIMARY  KEY (  `column`  ) 2.UNI ...