css中padding和margin的区别
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都是CSS盒子模型中的属性，它们的作用是控制盒子的边距和内边距。它们的区别在于：
1. 边距（margin）是指盒子与其它元素之间的空间，用于控制元素与其它元素之间的距离。比如，你可以使用margin属性来控制元素之间的间距，或者控制元素与浏览器边界之间的距离。
2. 内边距（padding）是指盒子内部边缘与盒子内容之间的空间，用于控制元素的内容与边框之间的距离。比如，你可以使用padding属性来控制文本和图片与盒子边框之间的距离。
简单来说，margin是用于控制盒子与其它元素之间的距离，padding是用于控制盒子内部元素与边框之间的距离。
下面是一个示例代码，展示margin和padding的使用方法：
```html
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 20px;
padding: 20px;
}
</style>
<div class="box">
<p>这是一段文本</p>
</div>
```
在上面的代码中，我们创建了一个宽高为200px的盒子，设置了1px的黑色边框，并设置了20px的margin和padding。这样，盒子与其它元素之间的距离和盒子内部元素与边框之间的距离都是20px。
发表评论