浅析css中的padding和margin

字数: (480)

阅读: (7628)

摘要：padding和margin是前端开发者学习和工作当中，一定会涉及到的两个知识点

padding和margin是前端开发者学习和工作当中，一定会涉及到的两个知识点，初学时总是将这两个搞混。
通过chrome开发工具我们能够看到这样一个盒模型图:

盒模型

从这里我们不难看出：padding就是边框到内容直接的一个距离，margin就是边框外面的一个距离，该元素与别的元素之间会存在这样一个距离。即一个是内边距，一个是外边距。
对于CSS的padding属性和margin属性，MDN是这样描述的:

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。padding简写属性可以避免分别设置每个边的内边距
margin属性为给定元素设置所有四个（上下左右）方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。
margin的top和bottom属性对非替换内联元素无效，例如<span>和<code>。

转载请注明出处: 皮哈皮阿

本文的链接地址: https://blog.phpat.com/web/5.html

本文最后发布于2012年03月06日17:04，已经过了4735天没有更新，若内容或图片失效，请留言反馈

扫描二维码，在手机上阅读