[分享]css内外边距上下左右

CSS内外边距调整元素内容与Border之间的距离，使网页看起来更加整洁美观。其中内边距分为上下左右四个方向，同样的，外边距也是这样分配的。/内边距/ paddingtop /上/ paddingri...

CSS内外边距调整元素内容与Border之间的距离，使网页看起来更加整洁美观。其中内边距分为上下左右四个方向，同样的，外边距也是这样分配的。

/*内边距*/
padding-top   /*上*/
padding-right /*右*/
padding-bottom/*下*/
padding-left  /*左*/

/*外边距*/
margin-top   /*上*/
margin-right /*右*/
margin-bottom/*下*/
margin-left  /*左*/ 

内外边距的调整通常采用以下4种方式：

1. 使用关键字：如“padding: 10px 20px 30px 40px;”表示上、右、下、左四个方向上的内边距，分别为10px、20px、30px和40px。同样的，还有margin同样适用。
2. 使用百分比：与关键字方式类似，只不过这里使用的是百分比。
3. 使用长度：直接指定长度值，如“padding-top: 10px;”表示上方向的内边距为10px。同样的还有margin。
4. 使用auto：当某个方向的内外边距设置为auto时，浏览器会自动计算相应的值，用于居中对齐元素。

通过调整内外边距，我们可以快速地调整页面布局，使网页更加美观大方。但需要注意的是，内外边距的过度使用也会导致视觉混乱，甚至影响网页访问速度。建议在使用时要掌握度，合理地使用内外边距才能使网页更加完美。