首页 浅析css中的padding和margin

浅析css中的padding和margin

jaeheng 2012-3-6 7 4636
标签: margin·padding

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>

作者: jaeheng 本文发布于2012-3-6 05:04:39
jaeheng

前端工程师,emlog模版beginning开发者

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。

评论列表:

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
@血儿:当然没有了,我又不是有钱的主