首页 浅析css中的padding和margin

浅析css中的padding和margin

jaeheng 2012-03-06 09:04:39 7 4798

padding和margin是前端开发者学习和工作当中,一定会涉及到的两个知识点,初学时总是将这两个搞混。

通过chrome开发工具我们能够看到这样一个盒模型图:

padding和margin

从这里我们不难看出:padding就是边框到内容直接的一个距离,margin就是边框外面的一个距离,该元素与别的元素之间会存在这样一个距离。即一个是内边距,一个是外边距。

对于CSS的padding属性和margin属性,MDN是这样描述的:

padding属性设置一个元素的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。 padding简写属性可以避免分别设置每个边的内边距

margin属性为给定元素设置所有四个(上下左右)方向的外边距属性。这是四个外边距属性设置的简写。四个外边距属性设置分别是: margin-top, margin-right, margin-bottom 和 margin-left 。指定的外边距允许为负数。 margin的top和bottom属性对非替换内联元素无效,例如<span><code>

padding · margin ·

发表评论

评论列表:

2015-03-01 14:02
这个投稿可以吗? /?post=449
子恒
2015-03-03 13:49
@李明:可以啊
2013-04-07 12:01
很不错啊!!
去你妹的
2012-03-06 22:24
不错,看好你哦!!
I_am_root
2012-03-06 22:08
会牛*起来的,嘻嘻
血儿
2012-03-06 18:59
没报酬?     嘿嘿   子恒君  木有木有。。。。
子恒
2012-03-06 19:27
@血儿:当然没有了,我又不是有钱的主