HTML CSS——margin和padding的学习
你在学习margin和padding的时候是不是懵了，——什么他娘的内边距，什么他娘的外边距。呵呵呵，刚开始我也有点不理解，后来通过查资料学习总算弄明白了，现在我来谈一下自己对margin和padding的理解：
一、什么是边距
CSS中的边距指的是当前元素border与周围其它元素border的距离（或者称为空间）。
二、什么是内边距，什么是外边距
代码2-1：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
- <style type="text/css">
- body{
- margin:0px;
- }
- .test1{
- width:150px;
- height:150px;
- border:6px solid red;
- }
- .test2{
- margin-top:40px;
- padding-top:40px;
- width:150px;
- height:150px;
- border:6px solid gray;
- }
- .test2_son{
- width:80px;
- height:50px;
- border:12px solid blue;
- }
- </style>
- </head>
- <body>
- <div class="test1">test1</div>
- <div class="test2">
- <div class="test2_son">test2_son</div>
- </div>
- </body>
- </html>
说明：图01中灰色地带是class值为test2的div的边框，它是有宽度的；
①、外边距：外边距指的是margin作用元素（这里是class值为test2的div）边框外延距离另一个元素边框外延（如果另一个元素和margin作用元素同级（这里是class值为test1的div））或内延（如果另一个元素是margin作用元素父级）的距离，如上图；
②、内边距：内边距指的是margin作用元素（这里是class值为test2的div）边框内延距离其子元素边框外延的距离，如上图；
③、内边距和外边距是针对于其作用的元素和其他元素来讲的，某一元素的内边距在另一个元素看来有可能是外边距，比如：class值为test2 div的内边距在class值为test2_test div元素看来就是外边距，所以上面代码也可以这样写：将class值为test2的div样式列表中“padding-top:40px;”去掉，class值为test2_test div元素添加“margin-top:40px;”——这样的效果和代码2-1是一样的；
三、margin和padding的属性值
①、它们的默认值都是0；它们的属性值都可以为auto——margin作用的元素由浏览器计算外边距，padding作用的元素由浏览器计算内边距；都
可通过设定属性值为inherit而继承父元素边距——margin继承父元素外边距，padding继承父元素内边距，但由于inherit在任何的版
本的 Internet Explorer （包括 IE8）都不支持，所以也就没有学习的必要了。
②、margin允许指定负的外边距值，不过使用时要小心；padding不允许指定负边距值；
③、margin和padding的属性值都可以有1个、2个、3个和4个：
a、margin有4个属性值(例如margin:10px 5px 15px 20px;)， 其含义是：上外边距10px、右外边距5px、下外边距15px、左外边距20px；
padding有4个属性值(例如padding:10px 5px 15px 20px;)，其含义是：上内边距10px、右内边距5px、下内边距15px、左内边距20px；
总结：无论是margin还是padding，如果有4个属性值，那么它们的作用方向顺时针 依次为上、右、下、左；
b、margin有3个属性值(例如margin:10px 5px 15px ;)， 其含义是：上外边距10px、右外边距和左外边距5px、下外边距15px；
padding有3个属性值(例如padding:10px 5px 15px;)，其含义是：上内边距10px、右内边距和左内边距5px、下内边距15px；
总结：无论是margin还是padding，如果有3个属性值，那么它们的作用方向顺时针 依次为上、右左、下；
c、margin有2个属性值(例如margin:10px 5px;)， 其含义是：上外边距和下外边距10px、右外边距和左外边距5px；
padding有2个属性值(例如padding:10px 5px;)，其含义是：上内边距和下内边距10px、右内边距和左内边距5px；
总结：无论是margin还是padding，如果有2个属性值，那么它们的作用方向顺时针 依次为上下、右左；
d、margin有1个属性值(例如margin:10px;)， 其含义是：4 个外边距都是 10px；
padding有1个属性值(例如padding:10px;)，其含义是：4 个内边距都是 10px；
总结：无论是margin还是padding，如果有1个属性值，那么它们的边距值都是相等的；
HTML CSS——margin和padding的学习的更多相关文章
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- margin和padding的学习
你在学习margin和padding的时候是不是懵了--什么他娘的内边距,什么他娘的外边距.呵呵呵,刚開始我也有点不理解,后来通过查资料学习总算弄明确了,如今我来谈一下自己对margin和paddin ...
- 【CSS】思考和再学习——关于CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再 ...
- 关于margin、padding 对内联元素的影响
内联元素和块级元素的区别是新手必须要掌握的知识点.大家可能平时注意块级元素比较多.所以这里重点让我们来讲讲常见的width height margin padding 对inline元素的影响. 测 ...
- css 盒模型、box-sizing 学习笔记
默认情况下,给元素设置的高度和宽度是元素内容区的宽度和高度,给元素加padding 和 border ,元素的实际宽度和高度的计算方式是下面的两个公式: 元素的宽度= 元素的内容区宽度 + 内边距宽度 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- CSS中的margin和padding的用法和区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...
- DIV+CSS：Margin和Padding属性[转载]
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...
- CSS中margin与padding的区别
CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时改变所有的外边距.——W3School 边界(margin):元素周围生成额外 ...
随机推荐
- JQuery高性能优化
使用JQuery时,你可以使用多种选择器,选择同一个元素,各种方法之间的性能是不一样的,有时候差异会特别大. 通常比较常用的选择器有以下几个: ID选择器 $("#id") 标签选 ...
- Apache CXF Webservice入门
1.步骤一览 关于CXF的介绍请移步官网.百科,这里仅供初次使用者入门. 2.步骤详情 2.1.环境准备 apache-cxf-3.0.0.zip下载 jdk1.7.0_51 Eclipse4.3.0 ...
- crossplatform---Nodejs in Visual Studio Code 05.Swig+Bootstrap
1. 开始 准备好Express+Swig的练习代码:https://github.com/Mengkzhaoyun/nodepractise 准备好AdminLTE后台管理模版:https://ww ...
- Sencha Toucha 2 —1.环境安装配置、在线打包、离线打包
环境安装配置 1. 下载 1.1 Sencha Touch 下载 http://cdn.sencha.com/touch/sencha-touch-2.2.1-gpl.zip 1 ...
- 让JNLP应用程序从Firefox浏览器启动起来
- Spectrum to XYZ to sRGB
如何将频谱响应转换为对应的RGB显示值: 首先要在频率功率分布(SPD)曲线的基础上,分别使用X/Y/Z三个频率匹配曲线(spectral matching curves,又名CIE XYZ Colo ...
- [Aaronyang] 写给自己的WPF4.5 笔记18[几何图形*Geometry图文并茂讲解]
为什么要掌握?因为WPF 3D知识很多与它Geometry对比,所以我要系统学一下. --学会用Geometry给Path的Data属性填充. 图形可以转换成路径,Path的值,当然你也可以直接使用R ...
- JAVA生产者消费者的实现
春节回了趟老家,又体验了一次流水席,由于桌席多,导致上菜慢,于是在等待间,总结了一下出菜流程的几个特点: 1.有多个灶台,多个灶台都在同时做菜出来. 2.做出来的菜,会有专人用一个托盘端出来,每次端出 ...
- halcon中variation_model_single实例注释.
* This example shows how to employ the new extensions of HALCON's variation model operators* to perf ...
- transmission简单使用
1.安装transmission-daemon sudo apt-get install transmission-daemon 2.设置用户名和密码并打开远程连接 a). 打开文件vim /var/ ...