CSS中margin和padding的区别

Posted 2023-03-13

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”。

参考技术A

　　CSS中margin和padding的区别如下：

margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。

padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。

　　从图示中看得就会比较直观，可以很容易理解了

　　

　　CSS是层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现html（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。

参考技术B

css中padding和margin的区别

margin 外边距

border 边框

padding 内边距

也就是说 设置margin 那么他所占据的空白地方会是在边框外面

设置padding 他所占据的空白地方是在边框里面，图解一下就更清楚了。

   

参考技术C 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”

css中margin、padding、border的默认值是多少

在DIV的CSS文件中，如果只设定字体大小、颜色等
而不设定margin、padding、border。
那么margin、padding、border的默认值是多少？是零吗？

如果我希望margin、padding、border是零。
那么在CSS中写上maigin:0;padding:0;border:none
还是不写，空在那里好？

参考技术A margin : auto | length
参数auto: 值被设置为相对边的值
参数length: 由浮点数字和单位标识符组成的长度值 | 百分数。百分数是基于父对象的高度。对于内联对象来说，左右外延边距可以是负数值。

padding : length
参数length:由浮点数字和单位标识符组成的长度值 | 或者百分数。百分数是基于父对象的宽度。

border : border-width || border-style || border-color
各参数属性是复合属性。请参阅各参数对应的属性。本回答被提问者采纳