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 ...
随机推荐
- CentOS7 通过YUM安装MySQL5.7 linux
CentOS7 通过YUM安装MySQL5.7 1.进入到要存放安装包的位置 cd /home/lnmp 2.查看系统中是否已安装 MySQL 服务,以下提供两种方式: rpm -qa | grep ...
- 8、神经网络:表述(Neural Networks: Representation)
8.1 非线性假设 我们之前学的,无论是线性回归还是逻辑回归都有这样一个缺点,即:当特征太多时,计算的负荷会非常大. 下面是一个例子: 当我们使用x1, x2 的多次项式进行预测时,我们可以应用的很好 ...
- 如何设置 ComboBox 下拉列表的高度或间距
ComboBox 的下拉列表部分总是很挤,看起不舒服,但是设置了 ItemHeight 没用,怎么办呢? 首先设置一个较大的 ItemHeight 值,比如 20: 然后设置 ComboBox 的 D ...
- 360CTF Re wp
这比赛唯一的一道Re
- Route的exact属性
exact是Route下的一个属性,react路由会匹配到所有能匹配到的路由组件,exact能够使得路由的匹配更严格一些. exact的值为bool型,为true时表示严格匹配,为false时为正常匹 ...
- CCF CSP/CCSP报名费优惠的方法以及常见疑问
目录 1. 本文地址 2. 认证作用 2.1. 高校认可 2.2. 赛事认可 2.3. 企业认可 3. 报名费价格及获取优惠的方法 3.1. CCF CSP 3.2. CCF CCSP 4. 语言与I ...
- Xshell设置密钥登录确保Linux
用Xshell设置密匙登陆服务器, 第一步.使用Xshell生成密钥 我们打开熟悉的XSHELL软件,然后在工具-新建用户密钥生成向导. 到了生成密钥参数界面,我们这里需要选择RSA密钥类型,以及密钥 ...
- Nginx优化_自定义报错页面
自定义返回给客户端的404错误页面 1. 优化前,客户端使用浏览器访问不存在的页面,会提示404文件未找到 client]# firefox http://192.168.4.5/xxxxx ...
- python3 使用 django-xadmin 遇到的许多坑
几乎所有公司项目都是python2的, xadmin对Python2 很友好,对Python3 很不友好, 所以在Python3 环境下使用xadmin遇到了许多意想不到的坑,在这里记录并分享一下: ...
- 触发写Redo Log的条件
参见:http://www.ixora.com.au/notes/redo_write_triggers.htm http://www.eygle.com/archives/2005/02/redoa ...