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的属性值
①、它们的默认值都是0px；它们的属性值都能够为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个属性值，那么它们的边距值都是相等的；
④、margin和padding的属性值能够为详细的带单位的数也能够为百分数——带单位的数比方1cm、1px等等，假设为百分数那么它们參照的对象是上一级的父元素边距值。
margin和padding的学习的更多相关文章
- HTML CSS——margin和padding的学习
你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...
- HTML CSS——margin与padding的初学
下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...
- html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）
html/css 盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width 是"宽 ...
- web兼容学习分析笔记-margin 和padding浏览器解析差异
二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px margin:15px 10px 15px 10px(IE7) <b ...
- margin和padding对行内元素的影响
这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...
- css-深入理解margin和padding
最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...
- CSS中的margin和padding的用法和区别
在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...
- 浅谈Margin和Padding值设置成百分数的布局
转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...
- DIV+CSS：Margin和Padding属性[转载]
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...
随机推荐
- Android性能优化之渲染
Google近期在Udacity上发布了Android性能优化的在线课程,目前有三个篇章,分别从渲染,运算与内存,电量三个方面介绍了如何去优化性能,这些课程是Google之前在Youtube上发布的A ...
- WINDOWS 的 MKLINK : 硬链接，符号链接 : 文件符号链接, 目录符号链接 : 目录联接
玩转WIN7的MKLINK 引言: 换了新电脑,终于再次使用上啦WIN7 ,经过一个周每天重装N次系统,... ... ... ... 在xp系统下,junction命令要用微软开发的小程序 junc ...
- yield的使用
参考: http://www.ibm.com/developerworks/cn/opensource/os-cn-python-yield/ http://blog.csdn.net/alvine0 ...
- jQuery判断复选框是否被选中的3种方式
页面部分: <input type="checkbox" id="cbx" /><label for="cbx"& ...
- 转 iOS开发debug跟release版本log屏蔽方法
简单介绍以下几个宏: ) __VA_ARGS__ 是一个可变参数的宏,这个可变参数的宏是新的C99规范中新增的,目前似乎只有gcc支持(VC6.0的编译器不支持).宏前面加上##的作用在于,当可变参数 ...
- Python 必备神器
1. pip 用来包管理 文档:https://pip.pypa.io/en/latest/installing.html # 安装,可指定版本号(sudo) pip install Django== ...
- Spring+Quartz实现文件中转站
其实这个功能QQ邮箱就有,为什么还要自己开发一个呢?因为有的文件非常重要...其实是客户要求... 那么我们先来看一下QQ的界面: 我们设计的界面: 文件要到期了是否通知用户?这里我们支持邮件及短信方 ...
- java利用poi包 为excel生成超链接
转载自:http://www.blogjava.net/leekiang/archive/2008/10/21/235794.html 1,一个需求, 要求报表生成的Excel表格支持超链接.例如 ...
- 观察者模式与Guava EventBus
观察者模式 结构图 代码实现 public abstract class Subject { private List<Observer> observerList = new Array ...
- 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: SYSTEM
ylbtech-Oracle:数据库实例: STOREBOOK > 表空间 > 编辑 表空间: SYSTEM 表空间 > 编辑 表空间: SYSTEM 1. 一般信息返 ...