你在学习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

说明：图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的学习的更多相关文章

  1. HTML CSS——margin和padding的学习

    你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边距.呵呵呵,刚开始我也有点不理解,后来通过查资料学习总算弄明白了,现在我来谈一下自己对margin和paddi ...

  2. HTML CSS——margin与padding的初学

    下文引自HTML CSS——margin和padding的学习,作者fengyv,不过加入了一些个人的看法. 你在学习margin和padding的时候是不是懵了,——什么他娘的内边距,什么他娘的外边 ...

  3. html/css 盒子布局 Margin 、Padding 、border 以及 清除浮动的知识 （学习HTML过程中的小记录）

    html/css  盒子布局 Margin .Padding .border 以及 清除浮动的知识 (学习HTML过程中的小记录) 作者:王可利(Star·星星) width     是"宽 ...

  4. web兼容学习分析笔记-margin 和padding浏览器解析差异

    二.margin 和padding浏览器解析差异 只有默认margin的元素 <body>margin:8px  margin:15px 10px 15px 10px(IE7) <b ...

  5. margin和padding对行内元素的影响

    这个是在面试的时候,面试官问我的一个小问题 自己没有考虑过inline元素设置margin和padding的问题 学习的过程记录下来 1)inline元素的高度是由元素的内容决定的(字体的大小和行高) ...

  6. css-深入理解margin和padding

    最近一阶段从新学习了css,发现真的有很多很多的地方都是空白的,今天我们来总结一下margin和padding的一些不为人知的秘密! 一利用float和margin实现布局 我们首先来实现一个两列示布 ...

  7. CSS中的margin和padding的用法和区别

    在CSS中margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离. 语法结构 (1)padding-left:10px; 左内边距 (2)padding-right:10px; 右内边距 ...

  8. 浅谈Margin和Padding值设置成百分数的布局

    转自:问说网http://www.uedsc.com/discussion-margin-and-padding-values.html Margin和Padding是我们在网页设计经常使用到的CSS ...

  9. DIV+CSS：Margin和Padding属性[转载]

    margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边. margin: 包括margin-top.margin-right.margin-bottom. ...

随机推荐

  1. ISO 7816-4: Interindustry Commands for Interchange

    5. Basic Organizations 5.1 Data structures5.2 Security architecture of the card 5.3 APDU message str ...

  2. XDM、GDM和KDM

    XDM.GDM.KDM是三种X Window的显示管理器 (1)XDM(默认的X Window System Display Manager)(2)GDM(gnome提供的Display Manage ...

  3. 清理IIS Express上的网站

    默认情况下,当使用Visual Studio浏览网页时,网站会被保存在IIS Express上,这些网站需要手动清理.可以通过命令行或界面进行清理. □ 通过命令行 →找到appcmd.exe在C:\ ...

  4. CLR基础，CLR运行过程，使用dos命令创建、编译、运行C#文件，查看IL代码

    CLR是Common Language Runtime的缩写,是.NET程序集或可执行程序运行的一个虚拟环境.CLR用于管理托管代码,但是它本身是由非托管代码编写的,并不是一个包含了托管代码的程序集, ...

  5. Knockout官网实例在MVC下的实现-01,实现Hello world

    本篇使用Knockout在MVC下实现"Hello World",对应的官网实例在这里. View视图 Knockout的一个特点是:声明式绑定,即Declarative bind ...

  6. Emoji表情符号录入MySQL数据库报错的解决方案

    原文:http://blog.itpub.net/26230597/viewspace-1243233/ 1,查看tomcat后台日志,核心报错信息如下:  Caused by: java.sql.S ...

  7. INDY10 IDHTTPSERVER返回中文不乱码

    INDY10 IDHTTPSERVER返回中文不乱码 procedure TynHttpServer.CommandGet(AContext: TIdContext; ARequestInfo: TI ...

  8. python笔记25-mock-server之moco

    前言 mock除了用在单元测试过程中,还有一个用途,当前端开发在开发页面的时候,需要服务端提供API接口 此时服务端没开发完成,或者说没搭建测试环境,这个时候前端开发会自己mock一个api服务端,自 ...

  9. 《Windows核心编程》第十一章——线程池

    隐式使用工作项 #include <iostream> #include <windows.h> ; VOID NTAPI SimpleCallback(PTP_CALLBAC ...

  10. Spring Validation

    Spring Validation模块用于表单数据验证配置,示例如下 依赖Jar包 <dependency> <groupId>javax.validation</gro ...