CSS基础—HTML元素内部边距

导语：哥们是一壶烈酒，让你兴奋，让你激动，让你尽显英雄本色，虽然有时也难免让你丢人现眼；朋友是一杯清茶，让你平和，让你宁静，让你略知世道人心，虽然有时也难免让你单调乏味。

元素内部边距是指元素内容与元素四边边框之间的距离，内部边距的作用是让元素的内容在元素四周留有空白。内部边距使用标签padding，padding的属性值为数值或百分比。属性值为百分比时，其实际数值是相对于父元素宽度计算的，当父元素宽度发生变化时，padding的属性值也会发生变化。padding的属性值有1至4个，其使用方法如下所示。

padding给出1个属性值时，元素的上内边距、右内边距、下内边距、左内边距都被定义为同一个值。下面的样式语句定义了元素上内边距是10px，右内边距是10px、下内边距是10px、左内边距是10px。

CSS基础—HTML元素内部边距，padding给出2个属性值时，元素的上下内边距被定义为同一个值，元素的左右内边距被定义为同一个值。下面的样式语句定义了元素上下内边距是15px、左右内边距是10px。

padding给出3个属性值时，元素的左右内边距被定义为同一个值。下面的样式语句定义了元素上内边距是15px、左右内边距是5px、下内边距是10px。

padding给出4个属性值时，元素的上、右、下、左内边距分别被定义为不同的值。下面的样式语句定义了元素上内边距是10px、右内边距是5px、下内边距是15px、左内边距是20px。

下面的HTML文档展示了padding的使用方法。

在上面的网页代码中，分别定义了p1（padding有1个值）、p2（padding有2个值）、p3（padding有3个值）、p4（padding有4个值）四个样式，这四个样式分别应用于p元素。浏览器显示效果如下图所示。

单独设置上、右、下、左内边距

前面介绍的padding样式标签对元素的上、右、下、左内边距都会产生作用。另外，CSS提供了样式标签padding-top（设置上内边距）、padding-right（设置右内边距、padding-bottom（设置下内边距）、padding-left（设置左内边距），用于分别设置HTML元素上、右、下、左的内边距。下面的HTML文档展示了样式标签的使用方法。

浏览器显示效果如下图所示。

小编写完一篇文章真的很不容易，好歹也是费劲了心思，就算不是最好的，但是肯定是最用心的，各位哥哥姐姐弟弟妹妹们，现编知道你们一定是最善良，最可爱的美男美女，一定会对小编的文章感动的，小编也别无所求，就是给小编点一个小小的关注和赞就行了，一边一定会在这里祝福大家的