CSS中margin和padding属性的区别

在CSS中，margin和padding两个属性都可以调整位置，因此比较容易混淆。这篇文章详细分析两者的不同，希望对学习CSS的朋友有帮助。

1. padding

padding的作用是调整当前元素内容(例如文本内容)在元素中的位置。默认内容应该是紧贴元素的边界显示，增加padding后可以增大内容和边界的距离。可看如下代码：

<html>
<head>
<style>
div.x {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
div.y {border: 1px solid black;background-color: lightblue;
}</style>
</head>
<body><h2>Using individual padding properties</h2><div class="y">This is a upper section</div>
<div class="x">This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div></body>
</html>

div.y未设置padding，而div.x设置了四个padding属性，其效果如下图：

大家可以看到在风格为div.y中，文字是紧贴div这个元素范围的边界的，也就是默认文字的高度和<div>所覆盖的高度一致。而在div.y中，增加了padding，文字和边界的距离明显增大了。但是注意：第一个div和第二个div依然是紧紧贴在一起的，中间没有空隙，这是html默认的。如果想增大这两个div的距离，则需要用到margin属性，见2。

2. margin

margin的作用是调整不同元素之间的距离。见如下代码:

<html>
<head>
<style>
div.x {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
div.y {border: 1px solid black;background-color: lightblue;
}
div.z {border: 1px solid black;background-color: lightblue;margin-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
</style>
</head>
<body><h2>Using individual padding properties</h2><div class="y">This is a upper section</div>
<div class="x">This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
<div class="z">This div element has a top margin of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>

增加了div.z的风格。显示效果如下:

大家可以看到，第三个div的距离和第二个div元素的距离明显增加了。但是因为第三个div未设置padding-top属性，所以它的文字内容是紧贴上边缘的。

3. 总结

padding调整的是一个html元素内部，文本或图片等内容和此html元素边界的距离。

margin调整的是不同的html元素之间的距离。

两者虽然显示效果相似，但是并不一样。尤其是当背景是透明的时候，两者很可能混用。