margin padding 区别，网页设计margin

一、margin和padding有什么区别

CSS中margin和padding有以下三方面区别。在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

1、语法结构。padding：padding-left:10px;左内边距、padding-right:10px;右内边距、padding-top:10px;上内边距、padding-bottom:10px;下内边距。margin：margin-left:10px;左外边距、margin-right:10px;右外边距、margin-top:10px;上外边距、margin-bottom:10px;下外边距。

2、可能取的值。padding：length规定具体单位记的内边距长度、%基于父元素的宽度的内边距的长度、auto浏览器计算内边距、inherit规定应该从父元素继承内边距。margin：length规定具体单位记的外边距长度、%基于父元素的宽度的外边距的长度、auto浏览器计算外边距、inherit规定应该从父元素继承外边距。

3、浏览器兼容问题。padding：所有浏览器都支持padding属性、任何版本IE都不支持属性值“inherit”。margin：所有浏览器都支持margin属性、任何版本IE都不支持属性值“inherit”。

二、谁能告诉我margin和padding的用法以及区别

margin表示盒子自身的位置描述，padding和border属于自身属性。对于盒子内部的内容来说，margin和padding对于距离的效果差不多的，但是因为padding是盒子属性的原因，会将盒子的其他属性也表示出来，相当于将小盒子变成了大盒子，像background，box-shadow之类属性的表示范围也会增大，而margin相当于将小盒子挪移了一段距离，并没有增大盒子本身。特殊情况除外（总能想到反例，说出来又太麻烦了）

三、CSS中margin与padding的区别

在CSS中，margin和padding是两个常用的属性，它们都用于控制元素之间的距离和元素内部的距离，但它们有一些区别：作用范围不同：margin是用来控制元素之间的距离，也就是元素的外边距；而padding是用来控制元素内部的距离，也就是元素的内边距。样式规则不同：margin有四个方向的值，分别是上边距(margin-top)，右外边距(margin-right)，下边距(margin-bottom)，左外边距(margin-left)；而padding也有四个方向的值，分别是上内边距(padding-top)，右内边距(padding-right)，下内边距(padding-bottom)，左内边距(padding-left)。合并方式不同：当两个元素的margin相遇时，它们会合并成一个外边距。也就是说，如果两个元素的margin相等，那么它们之间的距离就是这两个值中的较大值；而当两个元素的padding相遇时，它们不会合并，而是各自独立存在。方向不同：margin只有上下左右四个方向的值，而padding不仅有上下左右四个方向的值，还有内边距和外边距之分。也就是说，padding有上内边距和上外边距之分，下内边距和下外边距之分，左内边距和左外边距之分，右内边距和右外边距之分。百分比值的计算方式不同：在CSS中，margin的百分比值是相对于包含块的宽度来计算的；而padding的百分比值则是相对于包含块的内容区域宽度来计算的。总之，margin和padding都是用来控制元素之间的距离和元素内部的距离的属性，但它们的作用范围、样式规则、合并方式、方向以及百分比值的计算方式都存在一定的差异。