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

HTML中margin与padding的区别!(转)的更多相关文章
- CSS中margin和padding的区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离. 下面讲解 padding和ma ...
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
- HTML中margin和padding的区别
我们以DIV为一个盒子例子,既然和显示生活中的盒子一样,那我们想一下,生活中的盒子 内部是不是空的好用来存放东西,而里面存放东西的区域我们给他起个名字叫“content(内 容)”,而盒子的纸壁给他起 ...
- margin和padding的区别和用法
margin和padding的区别和用法 什么是margin.padding? marigin:就是外边距.padding:就是内边距.怎么就容易记住两者呢? 马蓉大家都知道吧,给王宝强带帽子的那位, ...
- 【margin和padding的区别】
margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...
- 使用CSS中margin和padding的基础和注意事项
在CSS中,margin和padding是页面布局的主要属性,如何灵活有效使用对于基于DIV+CSS设计网页方法是非常重要的,笔者经常使用且经常误使用,所以根据经验和网上资料整理出切合自己的内容,以备 ...
- 网页CSS中*{margin:0; padding:0;}有什么用
* 这东西叫“通配符”用来匹配页面上所有元素.*{margin:0; padding:0;} 像 2L 所说,body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin 或p ...
- CSS属性margin、padding的区别
原始状态 不设置margin和padding的状态 margin 设置外边距之后的状态 padding 设置内边距之后的状态 ,注意是撑开,外框高宽由300px变成450px. 说明:本文为原创作品, ...
- margin与padding的区别与用法—以及出现bug的解决方法
margin(外边距) padding(内边距) 一.语法结构 (1)margin-left:10px; 左外边距 (2)margin-right:10px; 右外边距 (3)margin-top ...
随机推荐
- 【sql server复制】不重新初始化快照的情况下新增表/存储过程/函数等
转发自:https://www.cnblogs.com/datazhang/p/5498789.html sqlserver同步后在不重新初始化快照的情况下新增表 在已有事务复制中,时长 ...
- SUST_ACM_2019届暑期ACM集训热身赛题解
问题A:Hello SUST! 知识点:基本输入输出 C/C++: #include <stdio.h> int main() { int n; scanf("%d", ...
- linux驱动模型——platform(1)
一.驱动模型包含什么? 1.1. 类class 1.1.2. 它能够自动创建/dev下的设备节点,不需要mknod /dev/xxx c x x创建.当然class还有其另外的作用,且自动创建设备节点 ...
- HDU 6697 Closest Pair of Segments(线段距离)
首先最容易想到的就是N2暴力枚举所有线段去找最小值,但是这样会做了许多无用功.我们可以先对线段排序,使得线段最左侧的端点按照x轴y轴排序,然后我们可以限定在这个线段的矩形框内的所有线段才有可能产生最小 ...
- 07-Log日志
# 1. 日志相关概念 - 日志的级别(level) - 不同的用户关注不同的程序信息 - DEBUG - INFO - NOTICE - WARNING - ERROR - CRITICAL - A ...
- unity2017 光照与渲染(二)FAQs
FAQ: 场景里的物体没有影子? 1)灯光是否开了影子 2)QualitySettings 中 shadows 的设置 3) 模型MeshRenderer 的 ReciveShadows 和 Cast ...
- Python之列表、元组、字典、集合及字符串的详细使用
1.列表 列表相当与C++中的数组,是有序的项目, 通过索引进行查找,但使用起来却方便很多,具体的操作看代码,自己实践一次就非常简单了. 注:列表一般用中括号“[ ]” #列表(数组) name_li ...
- P2617 Dynamic Rankings(待修改区间第k大)
题目链接:https://www.luogu.org/problemnew/show/P2617 题目: 题目描述 给定一个含有n个数的序列a[1],a[2],a[3]……a[n],程序必须回答这样的 ...
- Linux ssh内置sftp配置说明
centos7 环境下已验证 首先建立两个用户,用于sftp访问使用. eg: useradd -d /opt/sftp -s /bin/nologin sftp 说明 -s /bin/nologi ...
- php内置函数分析之strtoupper()、strtolower()
strtoupper(): PHP_FUNCTION(strtoupper) { zend_string *str; ZEND_PARSE_PARAMETERS_START(, ) Z_PARAM_S ...