CSS中margin和padding的区别

margin是指的外边距属性,padding是指的内边距。这是盒子模型的概念。

1、盒子模型示意图如下：

2、代码示例说明如下：

	
		
		
		
			div{
				border: 1px solid red;
				float: left;
				margin: auto 20px;
				width: 100px;
				height: 100px;
			}
			a{background:pink; padding-left:60px;}
		
	
	
11111

22222


	

结果如下：

区别如下：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

基本说明：

1、不翻译margin和padding是由于在汉语中并没有与之相对应的词语； 即使有这样的词语, 由于在编写css代码时, 必须使用margin和padding, 如果总用汉语词语代替其来解释的话, 到了实际应用时容易混淆margin和padding的概念；

2、如果有一点Html基础的话，就应该了解一些基本元素，如p、h1~h6、br、div、li、ul、img等。如果将这些元素细分，又可以分别为顶级元素、块级元素和内联元素。块级元素是构成一个html的主要和关键元素，而任意一个块级元素均可以用Box model来解释说明。

根据谷歌权威解释：Padding goes around all four sides of the content and you can target and change the padding for each side with CSS. Margin is the space between the border and next element. The space outside the border between it and the other elements is the margin.

翻译：Padding是在内容四周（上下左右）的空间，你可以给每一边的padding大小设置一个具体的值。 Margin是在边框和下一个元素之间的空间。

Source: http://stackoverflow.com/questions/5958699/difference-between-margin-and-padding