HTML元素外部边距
2329字,阅读需时8分钟
来自专栏
课程/专栏

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

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

.p_style
{
   margin:10px;
}

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

.p_style
{
   margin:15px 10px;
}

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

.p_style
{
   margin:15px 5px 10px;
}

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

.p_style
{
   margin:10px 5px 15px 20px;
}

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

<html>
<head>
<title>border-style样式</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
   .p1{border-style:solid; margin:10px;}
   .p2{border-style:dashed;margin:15px 10px;}
   .p3{border-style:dotted;margin:15px 5px 10px;}
   .p4{border-style:double;margin:10px 5px 15px 20px;}
</style>
</head>
<body>
<p>上、右、下、左外边距为10px</p>
<p>上下外边距为15px,左右外边距为10px</p>
<p>上外边距15px,左右外边距5px,下内外距为10px</p>
<p>上外边距为10px,右外边距为5px,下外边距为15px,左外边距为20px</p>
</body>
</html>

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

image.png

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

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

<html>
<head>
<title>单独设置上、右、下、左外边距</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
   .ptop{border-style:solid; margin-top:20px;}
   .pright{border-style:dashed;margin-right:20px;}
   .pbottom{border-style:dotted;margin-bottom:20px;}
   .pleft{border-style:double;margin-left:20px;}
</style>
</head>
<body>
<p>上外边距为20px</p>
<p>右外边距为20px</p>
<p>下外边距为20px</p>
<p>左外边距为20px</p>
</body>
</html>

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

image.png

我要评论
全部评论
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。
下载APP

手机、电脑同步学

用微信或手机浏览器扫描二维码,即可下载APP。

  • 备案号:鲁ICP备15001146号
  • @1997-2018 潍坊米粒花网络技术有限公司版权所有