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 ...
随机推荐
- Android Studio遇到了“No USB devices or running emulators detected”
我这里遇到的情况是adb interface 错误:未安装,在这个网站: http://adbdriver.com/downloads/ 下载了Automated installation(Unive ...
- line-height继承
父元素设置ling-height;子元素继承父元素的line-height 1.ling-height:固定像素 body{ font-size:20px; line-height: 24px; } ...
- idea Maven 一键 mvn clean package
文章目录 方法一 方法二 方法一 方法二
- memcached 安装与简单实用使用
一.简介 1.memcache与memcached的区别与联系: memcache是php的拓展,memcached是客户端,复杂的说:Memcache模块提供了于memcached方便的面向过程及面 ...
- 解决(Oracle)ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连接 问题
解决(Oracle)ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连接 问题通过在CMD下用lsnrctl status 查看出的问题:发现BLOCKEDORACLE启动步骤:s ...
- XStream教程
XStream是一个简单的基于Java库,Java对象序列化到XML,反之亦然(即:可以轻易的将Java对象和xml文档相互转换). 特点 使用方便 - XStream的API提供了一个高层次外观,以 ...
- 引用so动态链接库的方法
from ctypes import cdll lib = cdll.LoadLibrary('/home/zhengli/test/test.so') lib.func() 总结: 1.引用ctyp ...
- Centos7.6安装教程 && history设置显示执行命令的时间
一.规划磁盘使用空间(磁盘总大小200GB) /dev/sda1 mount /boot 1G mount point /dev/sda2 mount / 100G /dev/sda3 mount / ...
- pytest-skip详解
import pytestimport sysenvironment='android' #设置系统变量为android @pytest.mark.skipif(environment==" ...
- 关于prototype与constructor的几点理解
首先要明确一点,js中的prototype是每个函数创建时(并非执行时,而是函数存在于堆区后)自动创建一个默认对象,这一对象中可以动态的添加属性 在new对象后,可以通过“对象.属性名”的方式直接调用 ...