CSS基础—HTML元素内部边距

日期 2019-08-14 作者 admin 共0评论

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

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

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文档展示了样式标签的使用方法。

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

评论已关闭