CSS基础—HTML元素外部边距

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

元素外部边距是指元素四边边框的外部空白,设置元素的外部边距会在元素四边边框外创建额外的空白区域。外部边距使用标签margin,margin的属性值为数值或百分比。属性值为百分比时,其实际数值是相对于父元素宽度计算的,当父元素宽度发生变化时,margin的属性值也会发生变化。margin的属性值有1至4个,其使用方法如下所示。

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

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

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

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

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

在上面的网页代码中,分别定义了p1(margin有1个值)、p2(margin有2个值)、p3(margin有3个值)、p4(margin有4个值)四个样式,这四个样式分别应用于p元素。浏览器显示效果如下图所示,从显示效果可以看出,p元素在不同的margin样式下,四周有不同的空白区域。

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

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

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

评论已关闭