[分享]css内边距和外边距的属性

CSS内边距和外边距是定义网页布局时经常使用的属性。下面我们来看看这两个属性的具体用法。内边距属性padding： padding属性用于控制元素内边距的大小。内边距是元素的内容与边框之间的空白区域。...

CSS内边距和外边距是定义网页布局时经常使用的属性。下面我们来看看这两个属性的具体用法。

内边距属性padding：
padding属性用于控制元素内边距的大小。内边距是元素的内容与边框之间的空白区域。这个属性接受一个或多个数值参数，以像素为单位，用空格分隔。也可以使用百分比或者其他的长度单位。例如，
p {
  padding: 10px 5%;
}
这个代码表示，给p标签的上下内边距都是10像素，左右内边距是p元素的宽度的5%。即宽度越宽，左右内边距越宽。

外边距属性margin：
margin属性是控制元素外边距的大小。外边距是元素的边框和相邻元素之间的空白区域。这个属性也接受一个或多个数值参数，以像素为单位，用空格分隔。同样可以使用百分比或者其他的长度单位。例如，
p {
  margin: 20px auto;
}
这个代码表示，给p标签的上下外边距都是20像素，左右外边距是自动计算的，让p元素处于父元素的中央位置。

需要特别注意：
1. 内边距和外边距的值不能为负值。
2. 当为布局设定margin: auto时，浏览器会根据元素的宽度自动计算左右外边距大小，从而实现居中。