我们以DIV为一个盒子为例,既然和现实生活中的盒子一样,那我们想一下,生活中的盒子内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内容)”,而盒子的纸壁给他起个名字叫“border(边框)”,如果盒子内部的东西比如是一块硬盘,但是硬盘怕震动,所以我们需要在硬盘的四周盒子的内部均匀填充一些防震材料,这时硬盘和盒子的边框就有了一定的距离了,我们称这部分距离叫“padding(内边距)”,如果我们需要购买许多块硬盘,还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充,那么盒子和盒子之间的距离我们称之为"margin(外边距)" 
好滴!盒子模型的四要素就出来了分别是:content(内容)、border(边框)、 
padding(内边距)、margin(外边距),如下图 
我们的页面就是由许许多多的盒子组成的哟~~~,但是和现实生活中的盒子我们会忽 
略外边距(margin),但是在页面中,我们是不能忽略外边距(margin)的,只有包括外边距 
的盒子模型在CSS 中才是完整的,即使外边距为零,我们也不要忽略它,要知道他是存在的

HTML中margin与padding的区别!(转)的更多相关文章

  1. CSS中margin和padding的区别

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

  2. CSS中margin与padding的区别

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

  3. HTML中margin和padding的区别

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

  4. margin和padding的区别和用法

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

  5. 【margin和padding的区别】

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

  6. 使用CSS中margin和padding的基础和注意事项

    在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...

  7. 网页CSS中*{margin:0; padding:0;}有什么用

    * 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或p ...

  8. CSS属性margin、padding的区别

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

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

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

随机推荐

  1. PCB电路设计 altiumdesigner(项目软件总结)

    1.Altium designer 10在PCB里面复制粘贴,比CAD里面多一个动作,就是点击ctrl+C后,要左键点一下复制基点,比如某根线端点或者焊盘,再粘贴,就是基于刚才点的那个为基点粘贴了.2 ...

  2. java静态代码块,构造方法,初始化块的执行顺序

    代码Parent和Sub进行讲解 public class Parent { private static final String name; public Parent() { System.ou ...

  3. 浅谈格雷码(Grey Code)在信息学竞赛中的应用

    1.格雷码的概念 1.性质 格雷码(Grey Code),又叫循环二进制码或反射二进制码,是一种编码方式,它的基本特点是任意两个相邻的格雷码只有一位二进制数不同. 常用的二进制数与格雷码间的转换关系如 ...

  4. python 合并字典/拼接字典

    针对于python 3.5以上版本: 最好的最快的最优雅的方法是: result_dict = {**dict_1, **dict_2} 例如:( dict 代表 dictionary,也就是字典) ...

  5. python学习第四十八天json模块与pickle模块差异

    在开发过程中,字符串和python数据类型进行转换,下面比较python学习第四十八天json模块与pickle模块差异. json 的优点和缺点 优点  跨语言,体积小 缺点 只能支持 int st ...

  6. VS2015-MFC基础教程-应用程序工程中文件的组成结构

    VS2015应用程序向导生成框架程序后,我们可以在之前设置的Location下看到此文件夹中包含了几个文件和一个以工程名命名的子文件夹,这个子文件夹中又包含了若干个文件和一个res文件夹,创建工程时的 ...

  7. BigDecimal 的用法

    1.初始化 BigDecimal discount=new BigDecimal(0.9); BigDecimal discount=new BigDecimal(200); 2.加减乘除 加法 ad ...

  8. markdown简介及基本语法

    一.前言 Markdown是一种轻量级标记语言,它以纯文本形式(易读.易写.易更改)编写文档,并最终以HTML格式发布. Markdown也可以理解为将以MARKDOWN语法编写的语言转换成HTML内 ...

  9. [好好学习]在VMware中安装Oracle Enterprise Linux (v5.7) - (1/5)

    在想到Oracle Enterprise Linux,第一时间就是在Oracle官网上找到资源,但是,出现以下图片

  10. python OpenCV视频的读取及保存

    import cv2 cap = cv2.VideoCapture('rtsp://admin:hik12345@192.168.3.160/Streaming/Channels/1') fourcc ...