你在学习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. 主动找智能钥匙 PKE取代RKE是大势所趋

    http://taobao.autos.cn.yahoo.com/ypen/20111128/725214.html 近日,在车友论坛上的一个热帖<悲喜交加:1分钟就能复制汽车遥控器?>在 ...

  2. +5v to +13v Converter

    http://www.romanblack.com/smps/conv.htm What is it?  This is a simple smps voltage converter, it mak ...

  3. PHP-输入变量

    在Web开发过程中,我们经常需要获取系统变量或者用户提交的数据,这些变量数据错综复杂,而且一不小心就容易引起安全隐患,但是如果利用好ThinkPHP提供的变量获取功能,就可以轻松的获取和驾驭变量了. ...

  4. 【Go入门教程5】流程（if、goto、for、switch）和函数（多个返回值、变参、传值与传指针、defer、函数作为值/类型、Panic和Recover、main函数和init函数、import）

    这小节我们要介绍Go里面的流程控制以及函数操作. 流程控制 流程控制在编程语言中是最伟大的发明了,因为有了它,你可以通过很简单的流程描述来表达很复杂的逻辑.Go中流程控制分三大类:条件判断,循环控制和 ...

  5. [Asp.net MVC]页面伪静态实现

    摘要 从页面Url及页面名称上看,你会发现静态页面和伪静态是一样的.伪静态的页面后缀可能是html,htm,cshtml等,只是改变了url的表现形式,实际上还是动态的页面.在SEO方面,伪静态和静态 ...

  6. linux下查找nginx里的nginx.conf文件地址方法

    在控制台输入nginx -t 回车即可看到所在目录,直接vi 目录 即可查看

  7. Linux 操作当前时间

    一.查看和修改Linux的时区 1. 查看当前时区 命令 : "date -R" 2. 修改设置Linux服务器时区 方法 A 命令 : "tzselect" ...

  8. Ext表单提示方式：msgTarget

    Ext.QuickTips.init();  Ext.form.Field.prototype.msgTarget = 'side'; Ext表单提示方式:msgTarget:有4中方式:qtip,t ...

  9. Dictionary GetOrAdd

    public static TValue GetOrAdd<TKey,TValue>( this Dictionary<TKey,TValue> dictionary, TKe ...

  10. 学习node js 之微信公众帐号接口开发 准备工作之三

    app.js文件介绍,因为也是初学,以下的内容是个人的理解,有些不正确的地方请评论中指证:以注解的形式说明. //依赖组件[模块]导入 var express = require('express') ...