我们以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. Java学习day2关键字

    java的基本语法(1) 一.关键字 定义:被Java语言赋予特殊含义,用做专门用途的字符串 特点:关键字中的所有字母都为小写 二.标识符 定义:java对各种变量.方法和类等要素命名时所使用的的字符 ...

  2. 洛谷 P1073 最优贸易 & [NOIP2009提高组]（反向最短路）

    传送门 解题思路 很长的题,实际上在一个有向图(点有点权)中求一个从起点1到终点n的路径,使得这条路径上点权最大的点与点权最小的点的差值最大(要求必须从点权较小的点能够走到点权较大的点). ——最短路 ...

  3. React Hooks实现异步请求实例—useReducer、useContext和useEffect代替Redux方案

    本文是学习了2018年新鲜出炉的React Hooks提案之后,针对异步请求数据写的一个案例.注意,本文假设了:1.你已经初步了解hooks的含义了,如果不了解还请移步官方文档.(其实有过翻译的想法, ...

  4. SCUT - 11 - 被钦定的选手 - 质因数分解

    https://scut.online/p/11 T了好多次,还想用mutimap暴力分解每个数的质因数.后来记录每个数的最小质因子过了. #include <bits/stdc++.h> ...

  5. python 导入re模块语法及规则

    正则表达式是功能比较强大的模块,应用在很多地方,抓网页,数据分析,数据验证等,下面讲述python 导入re模块语法及规则. 1,re模块语法 re.match 从头开始匹配 re.search 匹配 ...

  6. BUUCTF--findit

    测试文件:https://buuoj.cn/files/7b8602971727c6c82ec0d360d5cad2c0/6a428ff2-25d7-403c-b28e-3f980a10a5a2.ap ...

  7. linux命令截取文件最后n行（所有命令）

    linux命令截取文件最后n行(所有命令) tail -n a.txt > b.txt 联想:系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) una ...

  8. websocket和基于swoole的简易即时通讯

    这里描述个基于swoole的websocket 匿名群聊 UI <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  9. SSM中前台传数组。后台接受的问题

    当时写得时候,忘记考虑json的jar,做个记录. 第一步:先带入jar <dependency> <groupId>com.fasterxml.jackson.core< ...

  10. python面向对象--包装标准类型及组合方式授权

    # 实现授权是包装的一个特性.包装一个类型通常是对已存在的类型进行一些自定义定制, # 这种做法可以新建,修改,或删除原有产品的某些功能,而其他的保持不变. # 授权的过程,其实也就是所有的更新功能都 ...